17370845950

使用 place-items: center; 可简洁实现所有子元素水平垂直居中；2. 通过 justify-content 和 align-items 分别控制主轴与交叉轴居中；3. 对单个子元素使用 justify-self 和 align-self 实现独立居中，灵活适配不同需求。

在 CSS Grid 布局中，让子元素在父容器内水平垂直居中非常简单。只需要在父元素上设置 Grid 相关属性，即可轻松实现居中对齐。

1. 使用 place-items 居中

这是最简洁的方法，适用于希望所有子元素都居中的场景。

示例代码：

    .container {

       display: grid;

       place-items: center;

       height: 100vh; /* 示例高度 */

    }

    .item {

       /* 子元素无需额外样式 */

    }
  

2. 分别设置 justify-content 和 align-items

如果需要更精细控制，可以分别设置主轴和交叉轴的对齐方式。

• justify-content: center; 控制子元素在行上的水平居中
• align-items: center; 控制子元素在列上的垂直居中

示例代码：

    .container {

       display: grid;

       justify-content: center;

       align-items: center;

       height: 100vh;

    }
  

3. 对单个子元素使用 justify-self 和 align-self

当只希望某个特定子元素居中时，可以在该子元素上单独设置。

• justify-self: center; 让该元素在网格单元格中水平居中
• align-self: center; 垂直居中

示例代码：

    .container {

       display: grid;

       height: 100vh;

    }


    .item {

       justify-self: center;

       align-self: center;

    }
  

基本上就这些方法，根据实际需求选择整体居中还是个别控制，Grid 提供了灵活又直观的对齐能力。