无需设置height实现居中对齐？实际测试存疑问

我查了不少教程和文档，它们说只需要下面这段代码就能实现div的水平与垂直居中：

.grid {
    display: grid;
    place-items: center;
}

但实际测试后发现这段代码只能实现水平居中，没法垂直居中。要实现垂直居中，必须给容器加height属性：

.grid {
    display: grid;
    place-items: center;
    height: 500px;
}

但固定height值没法适配任意高度的动态居中需求，而且设置height: 100%也无效。我用Edge浏览器测试的，想问问是我操作错了，还是这些文档和教程有问题？

测试代码如下：

<!DOCTYPE html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .grid {
            display: grid;
            place-items: center;
        }
    </style>
    <body>
        <article class="grid">
            <div>
                😀
            </div>
        </article>
    </body>
</html>

这不是你的操作问题，也不是文档教程的错误——它们只是没说全前提条件。

place-items: center确实能让网格项在容器内水平垂直居中，但前提是网格容器本身有足够的垂直空间。你的.grid容器默认是块级元素，高度由内部内容决定，垂直方向没有多余空间，自然看不出垂直居中的效果。

为什么height: 100%无效？因为CSS里百分比高度的生效需要父元素有明确的高度值。.grid的父元素是body，body的父元素是html，这两个元素默认高度都不等于视口高度，所以.grid设置height:100%找不到参考值，等于没设置。

给你两个实用的解决方法：

方案一：打通父元素高度链 #

让根元素占满视口高度，再让.grid继承父元素高度：

* {
    padding: 0;
    margin: 0;
}
html, body {
    height: 100%; /* 让根元素占满视口高度 */
}
.grid {
    display: grid;
    place-items: center;
    height: 100%; /* 继承body的高度 */
}

方案二：用vh单位直接适配视口 #

vh是视口高度单位，100vh等于当前视口的高度，不需要依赖父元素高度，还能自动适配内容高度：

* {
    padding: 0;
    margin: 0;
}
.grid {
    display: grid;
    place-items: center;
    min-height: 100vh; /* 至少占满视口高度，内容超过时自动拉伸容器 */
}

教程里之所以只写了display: grid和place-items: center，是默认读者已经清楚容器高度的基础前提——很多入门教程会省略这类细节，容易让新手踩坑。

内容的提问来源于stack exchange，提问作者JasSy