使用百分比的div如何居中显示
固定宽高的div居中显示用的比较多,大家也都比较熟悉,代码也比较简单。
position: absolute;
left: 50%;
top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;
给要居中的div设置这个定位设置就可以让固定宽高的div居中显示了。其中margin-left和margin-top的值分别为div宽高的一半,用负值。
在大多数页面有弹性布局需求的今天,div都用百分比设置而不是固定宽高。
使用百分比的div使用上面的属性是不能够实现居中显示的。(个人认为大概是百分比值不能精确的控制偏移值,经过试验发现向上偏移的值调整到手机界面居中显示的时候,在pc页面上比例就不对了,会发生严重的错位。)
话不多说,上解决方案。代码如下:
position: fixed;
top: 50%;
left: 50%;
width:90%;
height: 45%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
transform的translate属性是css3的位移属性,使用-50%即可让百分比div居中显示。
案例地址:http://www.18shu.cn/front/login/
适配各终端。