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

翻译于 2018-11-06 11:43:36 发布 · 371 阅读

13 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>