1.左右布局/左右中布局
准备了三个div,外层一个类名为wrap的div。内层三个div,类名分别为：left,middle,right.
HTML代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrap clearfix">
<div class="left">这是第一个DIV水平居中</div>
<div class="middle">这是第二个DIV垂直居中</div>
<div class="right">这是第三个DIV水平和垂直居中</div>
</div>
</body>
</html>
CSS代码如下：
*{
margin: 0;
padding: 0;
font-size: 12px;
}
.clearfix::after{
content: '';
display: block;
clear:both;
}
.wrap .left,
.wrap .middle,
.wrap .right{
width: 200px;
height: 200px;
background-color: brown;
color: aliceblue;
}
.wrap .left{
float: left;
text-align: center;
}
.wrap .middle{
float: left;
margin-left: 340px;
line-height: 200px;
}
.wrap .right{
float: right;
text-align: center;
line-height: 200px;
}
首先利用float属性让所有子元素div浮动起来。.left 和.middle 左浮动，.right 右浮动。然后根据.wrap的总长度，计算出.middle的margin-left为340px的时候，正好在页面的中间。
在页面中的效果为：
左右中布局
2.水平居中
html结构同上，让.left中的文字水平居中，
css 代码如下：
.wrap .left{
float: left;
text-align: center;
}
在页面中的效果为：
文字水平居中
3.垂直居中
html结构同上，让.middle中的文字垂直居中，
css代码如下：
.wrap .middle{
float: left;
margin-left: 340px;
line-height: 200px;
}
通过让.middle 的 line-height属性等于.middle 的高 200px ,就可以使得文字水平居中。
在页面中的效果为：
文字垂直居中
4.水平和垂直同时居中
html结构同上，让.right中的文字水平和垂直同时居中，
css代码如下：
.wrap .right{
float: right;
text-align: center;
line-height: 200px;
}
通过text-align:center使得文字水平居中，line-height等于所在div的高度使得文字垂直居中。同时设置这两个属性就可以使得文字水平和垂直同时居中。
在页面中的效果为：
水平垂直居中
网友评论