在做頁面的過程中，在很多地方都會遇到元素需要水平垂直的居中這個問題，之前總是去網上搜別人的代碼，今天仔細研究了一下，分享給大家，先寫一個簡單的例子：
<div class="mui-content">
<div id="logo_wrap">
</div>
</div>
我就是想把id為logo_wrap的元素整個頁面居中，logo_wrap的樣式#logo_wrap{height: 100px;text-align: center;}。
首先水平居中很簡單，如果logo_wrap的寬度是未設置的（100%）的話，通過設置#logo_wrap{text-align:center;}就可以實現水平居中；
如果logo_wrap寬度是有具體的數值的話，可通過設置#logo_wrap{margin:0 auto;}來實現。
其次是垂直居中。分為三步：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>