1.单行文字的居中
(1)水平居中:text-align:center;
(2)垂直居中:设置height = line-height;
(3)水平垂直居中:(1)+(2)
2.普通容器的居中
(1)已知容器的宽高
- 负margin配合绝对定位
.main{
width:500px;
height:500px;
background: lightgreen;
position: absolute;
top:50%;
left:50%;
margin-left: -250px;
margin-top:-250px;
}
注:margin-left,margin-top分别为:-其尺寸的一半。
(2)未知宽高
- transform
.main{
background: lightgreen;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}