网站布局：水平和垂直居中在网格中

水平和垂直居中在网格中

CSS 网格布局可以说是现代网页布局的灵丹妙药。它也是迄今为止布局系统中唯一的二维布局系统。在

CSS网格布局中，只需几行代码就可以快速帮助实现水平和垂直居中。比如下面的例子：

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item"></div>
</div>

/* CSS */
.grid {
    display: grid; // 或 inline-grid
    place-items: center
}
复制代码

效果如下：

Demo(codepen.io/airen/embed...)

Grid布局模块中的CSS，只要显示为：grid（或者inline-grid）显式设置网格容器，创建网格项，并自动创建网格行，即行和列（默认为一行一列）。

如果没有在网格容器中显式放置网格模板列和网格模板行，浏览器将默认将网格容器设置为网格内容的大小：

此方法也适用于 CSS 网格容器。元素（网格项），例如：

<!-- HTML -->
<div class="grid__container">
    <div class="avatar">:)</div>
    <div class="media__heading"></div>
    <div class="media__content"></div>
    <div class="action"></div>
</div>
复制代码

现在看到的效果如下：

Demo(codepen.io/airen/embed...)

并且 place items 应用于每个单元网格。这意味着它以单元格的内容为中心。比如下面的例子：

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item">
        <h3>Special title treatment</h3>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <div class="action">Go somewhere</div>
    </div>
</div>

/* CSS */
.grid__container {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vh;
}


.grid__item {
    display: grid;
    place-items: center;
}
复制代码

效果如下：

Demo(codepen.io/airen/embed...)

作者：阿里巴巴淘宝科技