1. 程式人生 > >HTML5 div在介面水平垂直居中

HTML5 div在介面水平垂直居中

設定一個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): 以上程式碼純手敲,有錯誤不可避免