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

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

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

原来一直使用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;
    }
  1. 关于 justify-content: center; align-content: center; justify-content是控制整个内容区域在container中的位置的

  2. 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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值