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

2020-09-1311:53:50网页制作Comments5,006 views字数 1150阅读模式

Grid中实现水平垂直居中

CSS Grid布局可以说是现代Web布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

在CSS Grid布局中,只需要仅仅的几行代码也可以快速的帮助我们实现水平垂直居中的效果。比如下面这个示例:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

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

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

效果如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

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

Demo(codepen.io/airen/embed…)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

在CSS Grid布局模块中,只要显式设置了display: grid(或inline-grid)就会创建Grid容器和Grid项目,也会自动生成网格线,即行和列(默认为一行一列)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

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

在没有显式地在Grid容器上设置grid-template-columns和grid-template-rows,浏览器会将Grid容器默认设置为Grid内容大小:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

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

这种方法也适用于CSS Grid容器中有多个子元素(Grid项目),比如:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

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

这个时候你看到的效果如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

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

Demo(codepen.io/airen/embed…)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

而且palce-items适用于每个单元格。这意味着它将居中单元格的内容。比如下面这个示例:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

<!-- 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;
}
复制代码

效果如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

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

Demo(codepen.io/airen/embed…)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

作者:阿里巴巴淘系技术文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20219.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/20219.html

Comment

匿名网友 填写信息

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

确定