使用百分比的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/

适配各终端。

转载于:https://www.cnblogs.com/mistyrain/p/4915143.html