HTML5 div在界面水平垂直居中

最新推荐文章于 2022-12-12 11:22:09 发布

A_Bear

最新推荐文章于 2022-12-12 11:22:09 发布

阅读量1.6w

点赞数 1

分类专栏： html5 文章标签： html5 水平垂直居中

本文链接：https://blog.csdn.net/a_bear/article/details/80546181

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

设置一个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.οnlοad=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): 以上代码纯手敲，有错误不可避免

A_Bear

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5 div在界面水平垂直居中

设置一个div垂直居中，查了一下，有的用获取屏幕宽度和高度，再减去div宽度的一半，就将div居中，代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;prettify.js&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;!-- Incl
复制链接

扫一扫