CSS的水平垂直居中

水平居中

①针对文本可以使用text-align
②针对图像、盒子元素可以使用设置宽度,然后设置margin:0 auto;
③针对图像、盒子元素可以使用定位、设置left:50%,然后设置margin-left:-自身宽度的一半
④针对图像、盒子元素可以使用定位、设置left:50%然后设置,然后设置transform: translateX(-50%)。意思是使得div向左平移(translate)自身宽度的一半(50%)。

垂直居中

①针对文本可以使用line-height=height=高度
②针对图像、盒子元素可以使用定位、设置top:50%然后设置 margin-top:-自身宽度的一半
③针对图像、盒子元素可以使用定位、设置top:50%然后设置,然后设置transform: translateY(-50%)。意思是使得div向上平移(translate)自身高度的一半(50%)。(transform: translateY、transform: translateX是css3中的新增属性,后面进阶专题有讲哦)


水平垂直居中

方法一:
单行文字水平垂直居中

1
2
3
4
5
6
.warp{
height:400px;
width:100%;
border:1px solid blue;
line-height:400px; /*设置为height高度*/
text-align:center;

方法二:
多行文字水平垂直居中

1
2
3
4
5
6
7
8
9
10
.warp{
height:400px;
width:100%;
border:1px solid blue;
display:table;
}
.content{
vertical-align:middle;
display:table-cell;
text-align:center;

方法三:
元素的width值、height值确定

1
2
3
4
5
.img{
position:absolute
top:0;right:0;left:0;bottom:0;
margin:auto;
}

方法四:
元素的width值、height值不确定

1
2
3
4
5
6
.img {   
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
}

方法五:
前提就是先把父元素设为display:flex

1
2
3
4
5
6
7
.main{
padding:20px;
display:flex;
}
.middle{
margin:auto;
}

思路: vertial-align只适用于行内元素和单元格元素起作用,把.content设置为单元格元素,.warp设置为表格