一、
.div1{
position: absolute;
width: 100px;
height: 100px;
background: blue;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
脱离文档流,用绝对定位实现,优点是所有浏览器都支持,缺点是div元素相对于父级元素的宽高必须有固定值。
如果不想计算值,就写一个自适应值让计算机自己计算
.div2{
position: absolute;
background: blue;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 90px;
height: 90px;
}
二、
.jz{ line-height: 100px; height: 100px; text-align: center; }
优点:简单
缺点:这种方法只适用于行内元素
三、
这是两个属性,这两个属性很强大,无论是行内元素还是块级元素,只要父元素dsplay设置了-webkit-box属性,后面两个属性分别设置居中。
优点:适用于行内元素和块级元素
缺点,部分浏览器不支持
.jz1{
padding:10px;
background:green;
color:#fff;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
用tanslate进行居中
优点:在不知道宽高的情况下依然可以进行居中
缺点:兼容性不是很好