使用网格在父元素中水平和垂直地居中定位子元素

最新推荐文章于 2023-10-11 22:56:30 发布

翻译最新推荐文章于 2023-10-11 22:56:30 发布 · 380 阅读

CSS技巧专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用CSS Grid实现内容居中的方法，通过定义.grid-centering类，设置display为grid，justify-content和align-items均为center，使div元素内的内容在水平和垂直方向上居中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .grid-centering {
            display:grid ;
            justify-content: center;
            align-items: center;
            height: 100px;
        }
    </style>
</head>
<body>

<div class="grid-centering">
    <div class="child">Centered content.</div>
    <div class="child">Centered content.</div>
</div>

</body>
</html>