网页布局:Grid中实现水平垂直居中

2020年9月13日11:53:50 发表评论 278 views

Grid中实现水平垂直居中

CSS Grid布局可以说是现代Web布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。

在CSS Grid布局中,只需要仅仅的几行代码也可以快速的帮助我们实现水平垂直居中的效果。比如下面这个示例:

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

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

效果如下:

网页布局:Grid中实现水平垂直居中

Demo(codepen.io/airen/embed…)

在CSS Grid布局模块中,只要显式设置了display: grid(或inline-grid)就会创建Grid容器和Grid项目,也会自动生成网格线,即行和列(默认为一行一列)。

网页布局:Grid中实现水平垂直居中

在没有显式地在Grid容器上设置grid-template-columns和grid-template-rows,浏览器会将Grid容器默认设置为Grid内容大小:

网页布局:Grid中实现水平垂直居中

这种方法也适用于CSS Grid容器中有多个子元素(Grid项目),比如:

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

这个时候你看到的效果如下:

网页布局:Grid中实现水平垂直居中

Demo(codepen.io/airen/embed…)

而且palce-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;
}
复制代码

效果如下:

网页布局:Grid中实现水平垂直居中

Demo(codepen.io/airen/embed…)

作者:阿里巴巴淘系技术

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: