css grid布局实现水平垂直居中文字水平垂直居中

最新推荐文章于 2025-09-07 14:28:41 发布

原创最新推荐文章于 2025-09-07 14:28:41 发布 · 2.2w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#css

布局专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS Grid布局实现元素的水平垂直居中，包括通过`justify-content`、`align-content`、`align-items`和`justify-items`属性的设置，以及确保内部文字同样居中的方法。参考了阮一峰的文章，详细记录了学习过程。

部署运行你感兴趣的模型镜像

原来一直使用flex布局来实现水平垂直居中，今天才知道还有grid也是很好用的，参考阮一峰大神的博客，简单记录一下学习；
在这里插入图片描述

<div class="container">              
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
</div>

   .container {
        display: grid;
        /* grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。 */
        grid-template-columns: repeat(4, 60px);
        grid-template-rows: repeat(2, 60px);
        /* grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式， 
        grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）
        我设置的是10 行与行之间 列与列之间 都是10*/
        grid-gap: 10px;
         /* item在这个单元格中的位置justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下） */
        align-items: center;
        justify-items: center;  
        /* justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。 */
        justify-content: center;
        align-content: center;

        width: 100%;
        height: 500px;
        background: #f3f3f3;
    }
    .item {
        width: 30px;
        height: 30px;
        display: grid;
        border: 1px solid red;
        justify-content: center;
        align-content: center;
    }

关于 justify-content: center; align-content: center; justify-content是控制整个内容区域在container中的位置的
align-items: center; justify-items: center;简单来说-items是控制单个单元格的位置的

这是未设置任何center的状态
这是设置了 justify-content: center; align-content: center;
可以看到整体居中了但是每个div在自己所在的单元格内还是处在左上角的位置的

这里设置里align-items: center; justify-items: center;，单元格内就居中了
3.一般情况下需要item中的文字也水平垂直所以我给item也设置了grid 就可以实现了
ps:如果没有设置就会是下面的情况

参考 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html