JS实现div动态⽔平垂直居中
在做页⾯的过程中，在很多地⽅都会遇到元素需要⽔平垂直的居中这个问题，之前总是去⽹上搜别⼈的代码，今天仔细研究了⼀下，分享给⼤家，先写⼀个简单的例⼦：
<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">
  load=function(){
div中的div居中  var height=document.body.scrollHeight;
  var logo_ElementById("logo_wrap");
  var margin_top=(height-100)/2;      //因为此div在页⾯中只⽤了⼀次且以后不会改变，所以写了数值，如果是不确定的，获取到⾼度放着这⾥就可以
  logo_wrap.style.marginTop=margin_top+"px";
  };
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。