css网格布局下图标和文字无法居中怎么办

在css网格布局中，每个网格单元格默认的对齐方式是拉伸，也就是元素会占满整个单元格的空间，这就导致很多开发者设置的图标和文字无法按照预期居中。要解决这个问题，就需要用到justify-self和align-self两个属性，它们分别控制元素在水平方向和垂直方向的对齐方式。

justify-self和align-self属性介绍

justify-self属性用于定义单个网格元素在其网格单元格内的水平对齐方式，可选值包括start、end、center、stretch，默认值是stretch。align-self属性用于定义单个网格元素在其网格单元格内的垂直对齐方式，可选值和justify-self一致，默认值同样是stretch。

当我们需要让图标和文字在单元格内居中时，只需要给对应的网格元素设置justify-self:center和align-self:center即可，这两个属性会覆盖网格容器设置的justify-items和align-items属性值。

基础使用示例

下面是一个简单的网格布局示例，网格容器包含3个单元格，每个单元格内有一个图标和文字，我们通过设置子元素的对齐属性实现居中：

/* 网格容器样式 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 800px;
    height: 300px;
    border: 1px solid #ccc;
}

/* 网格子元素样式 */
.grid-item {
    /* 水平居中 */
    justify-self: center;
    /* 垂直居中 */
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* 图标样式 */
.icon {
    width: 40px;
    height: 40px;
    background-color: #409eff;
    border-radius: 50%;
}

/* 文字样式 */
.text {
    font-size: 14px;
    color: #333;
}

对应的html结构如下：

<div class="grid-container">
    <div class="grid-item">
        <div class="icon"></div>
        <span class="text">功能一</span>
    </div>
    <div class="grid-item">
        <div class="icon"></div>
        <span class="text">功能二</span>
    </div>
    <div class="grid-item">
        <div class="icon"></div>
        <span class="text">功能三</span>
    </div>
</div>

常见使用误区

• 误区一：给网格容器设置justify-content和align-content。这两个属性是控制所有网格轨道在容器内的对齐方式，不是控制单个网格元素的对齐，对单个单元格内的元素居中没有作用。
• 误区二：混淆justify-items和justify-self。justify-items是设置在网格容器上，控制所有子元素的水平对齐，而justify-self是设置在单个子元素上，优先级更高，适合单独调整某个元素的对齐方式。
• 误区三：子元素本身设置了宽度或高度导致居中效果不明显。如果子元素设置了固定宽度，且宽度等于单元格宽度，那么justify-self:center不会生效，需要去掉固定宽度或者调整宽度值。

多场景适配方案

如果页面中有多个网格元素都需要居中，可以直接在网格容器上设置justify-items:center和align-items:center，这样所有子元素都会默认居中，不需要给每个子元素单独设置属性：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 800px;
    height: 300px;
    border: 1px solid #ccc;
    /* 所有子元素水平居中 */
    justify-items: center;
    /* 所有子元素垂直居中 */
    align-items: center;
}

.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

如果只有部分元素需要居中，其他元素保持默认对齐，就给需要居中的元素单独设置justify-self和align-self属性即可，这样的布局方式更加灵活。

css_gridjustify-self:centeralign-self:center网格布局居中修改时间：2026-07-11 13:12:22