一、行内元素水平居中
text-align: center;
二、行内元素垂直居中
height: 40px;line-height: 40px; 让这两个值相等
三、块级元素水平居中
300px; margin: 0 auto; 可以不设置高度
三、块级元素垂直居中
1.固定宽高块级元素垂直居中
|
1
2
3
4
5
6
7
8
9
10
11
|
div{ width: 200px;height: 100px;line-height: 100px;border: 1px solid #000;text-align: center;position: absolute;left: 50%;top: 50%; margin-left: -100px;margin-top: -50px; } |
2.宽高是百分比的块级元素垂直居中
|
1
2
3
4
5
6
7
8
9
|
div{ width: 10%;height: 30%;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto; <br>} |
3.宽高不固定的块级元素垂直居中
|
1
2
3
4
5
6
7
8
9
10
11
12
|
div{ transform: translate(-50%,-50%);/*此时的百分数是以自身的宽高为参考*//* 1500px;height: 300px;*//* 300px;*/width: 30%;height: auto; |