水平居中
水平居中在布局的时候经常用到,水平居中主要分两种情况,一种是已知宽度居中,未知宽度居中。
已知宽度居中
如果已知元素宽度,那水平居中会非常简单,使用margin:auto即可实现
- margin:auto
css:
.margin-middle{
margin:auto;
width: 100px;
height: 200px;
background-color: #8cc5ff;
}
html
<div class="margin-middle">已知宽度margin:auto水平居中</div>
未知宽度居中
未知宽度也是比较常用的,实现的方式有多种。
1.float居中
float居中中,父元素和子元素都要这是为float:left,position:relative,不同的是父元素是left:50%,子元素是right:50%。
.float-middle{
float: left;
position: relative;
right: 50%;
}
.box{
float: left;
/*display: inline-block;或者设置成inline-block*/
position: relative;
left: 50%;
}
<div class="box">
<div class="float-middle">浮动居中</div>
</div>
2.绝对位置居中
绝对位置居中只需要在子元素中设置absolute,并且left:50%,transform:translateX(-50%)即可实现
.absolute-middle{
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #8cc5ff;
}
<div class="box2">
<div class="absolute-middle">绝对位置居中</div>
</div>
如果需要相对于父元素居中,则需要在父元素设置position:relative。