固定寬高的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/
適配各終端。