css之水平垂直居中

最新推荐文章于 2024-04-15 14:34:06 发布

光芒万丈母娘

最新推荐文章于 2024-04-15 14:34:06 发布

阅读量227

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css 文章标签： css 垂直水平居中

本文链接：https://blog.youkuaiyun.com/weixin_40322503/article/details/79918268

html/css 专栏收录该内容

8 篇文章

订阅专栏

面试十有八九会考到的问题（岂可休美图竟然没问我这个！）

题目：一个弹窗水平垂直居中于整个body

所用的html都是

<body>
    <div class="box"></div>
</body>

①最牛掰的display:flex

       *{
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            /*不能改成 100%，因为vh是根据浏览器视口的高度，
            而%根据祖先元素，body没有祖先元素*/
        }
        .box {
            width: 100px;
            height: 100px;
            background: deeppink;
        }

在说第二个坑之前先来看第二种解法：

②.box相对定位，进行top、left定位再用translate位移

       *{
            margin: 0;
            padding: 0;
        }
        body {
            height: 100vh;
            /*不能改成100%*/
        }
        .box {
            width: 100px;
            height: 100px;
            background: deeppink;
            position: relative;
            /*或者position: absolute也可以*/
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

好了，为什么说有坑呢。请看注释：不能改成100%。之前我总认为100vh和100%是可以互换着使用的。但其实真正可以和100vh互换的是html, body {height: 100%;}

因为页面并没有缺省的高度值，所以当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度（css先加载然后才是渲染dom树所以我们获取不到html高度，再加上没有缺省高度值），也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果，浏览器不会对这个值有任何的反应。这两种方法都是需要body有高度的，所以必须采用100vh，否则无法达到垂直居中。

③绝对定位上下左右都设0且margin:auto

       *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 100px;
            height: 100px;
            background: deeppink;
            position: absolute; 
            left: 0; top: 0; right: 0; bottom: 0;  
            margin: auto;
        }

此法不像②一样用到了百分数所以无需body设定高度（此时的body高度为0）。关键词：auto 默认是使用剩余空间，所以不论left还是right定义了auto，计算值都会是包含块的剩余空间，如果左右都设置了auto，那么就会均分剩余空间。

④margin: 50vh auto auto

       *{
            margin: 0;
            padding: 0;
        }
        body {
            /*height: 100vh;*/
            /*只能用%或者不写，不能用vh*/
        }
        .box {
            width: 100px;
            height: 100px;
            background: deeppink;
            margin: 50vh auto auto;
            transform: translateY(-50%);
        }

这里遗留下来一个问题，希望好心人能给解答一下，为什么设成body:100vh就会出现body在box腰部以下呢？还会出现滚动条……