HTML5 div在介面水平垂直居中
阿新 • • 發佈：2018-11-26
設定一個div垂直居中，查了一下，有的用獲取螢幕寬度和高度，再減去div寬度的一半，就將div居中，程式碼如下：
第一個方法：
<div class="mui-content">
<div id="logo_wrap">
</div>
</div>分為三步：
1.獲取到當前螢幕的高度；
2.獲取到需要居中的div的高度；
3.用螢幕的高度減去div的高度除以2就是需要給div設定的margin-top的值。
針對上邊的例子的JS程式碼：
<script type="text/javascript"> window.onload=function(){ var height=document.body.scrollHeight; var logo_wrap=document.getElementById("logo_wrap"); var margin_top=(height-100)/2; //因為此div在頁面中只用了一次且以後不會改變，所以寫了數值，如果是不確定的，獲取到高度放著這裡就可以 logo_wrap.style.marginTop=margin_top+"px"; }; </script>
上面的例子是從度娘上檢視到的，沒有檢測驗證，只是知道有這麼個方法；
第二個方法：
只用css來使div居中：
<body>
<div class="big">
// 內容
</div>
</body>使用css來垂直水平居中
注意事項：<style type="text/css"> .big{ position: absolute; left: 50%; margin-left: -(div寬度的一半); top: 50%; margin-top: -(div高度的一半) } </style>
1): position要使用absolute，不能使用relative
2): margin-left: -xxPx中是負數的px，目的是消除div寬度和高度帶來的影響
3): 以上程式碼純手敲，有錯誤不可避免