一、水平居中
1、行内元素或者display为inline的块级元素,前提是子元素没有float;
对父元素设置:text-align:center;
2、块级元素(已知宽高):
1)、元素自身设置为 margin:0 auto;
2)、利用绝对定位和margin结合的方式:
.elem {
position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);
}
3、块级元素(未知宽高):
1)、将元素放入table单元格中,设置table为 margin:0 auto;
2)、用display属性将元素变成行内元素,然后父元素设置text-align:center;
3)、父元素左浮动,并相对定位,left:50%;子元素设置相对定位和 left:-50%;
(即设置父元素和子元素分别往相反的方向移动50%) 如下:
.wrap{
float:left;
position:relative;
left:50%;
clear:both;
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
<div class="wrap">
<div class="wrap-center">Hello world</div>
</div>
4、采用flex布局,日常未用过,不多说;
二、垂直居中
1、行内元素:设置line-height属性或者是通过 vertical-align方式
2、块级元素的垂直居中也与水平居中类似,利用设置margin的方法以及通过绝对定位和margin结合的方式都可以;
三、水平垂直居中
在日常布局使用时,我们比较少单独使用一种居中方式,更多的还是让元素水平垂直居中;
1、对于行内元素,一般采用line-height和text-alian结合的方式实现:
2、对于块级元素,比较常用的一般有三种:
1)、若元素宽高已知,则通过设置绝对定位为50%,然后向相反的方向移动自身一半的宽高;
.elem{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-200px;
}
2)、若元素宽高未知,采用css3的transform属性(支持IE9+),原理和上面一样(宽高已知也可以用);
.elem{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
3)、利用绝对定位和margin结合的方式:
.elem{
weight:200px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
4)、table-cell方法,使元素如表格一样展示:
.elem{
display: table-cell;
text-align: center;
vertical-align: middle;
}
5)、flex弹性布局:
.elem{
display: flex;
justify-content: center;
align-items: center;
}