固定宽高的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%);

 

发表评论

邮箱地址不会被公开。 必填项已用*标注