css的grid布局div怎样垂直居中

Question

grid网格布局中的div文本设置垂直居中不起作用

<div id="div-station">
                <div id="station1">工位1</div>
                <div id="station2">工位2</div>
</div>

<div id="div-weld">
                <div id="s1" class="工位1">
                    <div class="weld" id="s1-weld1" onclick="weldClick(this)">焊枪1</div>
                    <div class="weld" id="s1-weld2" onclick="weldClick(this)">焊枪2</div>
                    <div class="weld" id="s1-weld3" onclick="weldClick(this)">焊枪3</div>
                    <div class="weld" id="s1-weld4" onclick="weldClick(this)">焊枪4</div>
                    <div class="weld" id="s1-weld5" onclick="weldClick(this)">焊枪5</div>
                    <div class="weld" id="s1-weld6" onclick="weldClick(this)">焊枪6</div>
                    <div class="weld" id="s1-weld7" onclick="weldClick(this)">焊枪7</div>
                    <div class="weld" id="s1-weld8" onclick="weldClick(this)">焊枪8</div>
                </div>
                <div id="s2" class="工位2">
                    <div class="weld" id="s2-weld1" onclick="weldClick(this)">焊枪1</div>
                    <div class="weld" id="s2-weld2" onclick="weldClick(this)">焊枪2</div>
                    <div class="weld" id="s2-weld3" onclick="weldClick(this)">焊枪3</div>
                    <div class="weld" id="s2-weld4" onclick="weldClick(this)">焊枪4</div>
                    <div class="weld" id="s2-weld5" onclick="weldClick(this)">焊枪5</div>
                    <div class="weld" id="s2-weld6" onclick="weldClick(this)">焊枪6</div>
                    <div class="weld" id="s2-weld7" onclick="weldClick(this)">焊枪7</div>
                    <div class="weld" id="s2-weld8" onclick="weldClick(this)">焊枪8</div>
                </div>
            </div>

#div-weld {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 50% 50%;
}

#s1 {
    display: grid;
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: 50% 50%;
    
}

#s2 {
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    
}

.weld {
    align-items: center;
    text-align: center;
    font-size: 35px;
    border: 2px solid darkseagreen;
    color: white;
      // line-hight:160px 写死可以垂直居中，但浏览器缩小时不能自适应。
}

显示结果是 焊枪1-8文本只能水平居中，不能垂直居中。这部分高宽都是自适应的，不能设置固定值

然后参考了一下博文：https://www.jianshu.com/p/1140cb9cf7cf 也不成功。

请问这个css要怎样写才能达到效果。

Answer 1

【以下回答由 GPT 生成】

问题： 请问如何在CSS的Grid布局中实现div的垂直居中？我尝试使用如下的代码来实现，但未能成功：

<div id="div-station">
    <div id="station1">工位1</div>
    <div id="station2">工位2</div>
</div>

<div id="div-weld">
    <div id="s1" class="工位1">
        <div class="weld" id="s1-weld1" onclick="weldClick(this)">焊枪1</div>
        <div class="weld" id="s1-weld2" onclick="weldClick(this)">焊枪2</div>
        <div class="weld" id="s1-weld3" onclick="weldClick(this)">焊枪3</div>
        <div class="weld" id="s1-weld4" onclick="weldClick(this)">焊枪4</div>
        <div class="weld" id="s1-weld5" onclick="weldClick(this)">焊枪5</div>
        <div class="weld" id="s1-weld6" onclick="weldClick(this)">焊枪6</div>
        <div class="weld" id="s1-weld7" onclick="weldClick(this)">焊枪7</div>
        <div class="weld" id="s1-weld8" onclick="weldClick(this)">焊枪8</div>
    </div>
</div>

解答： 在Grid布局中，要实现div的垂直居中，您可以使用自动的Grid属性，并设置div的父容器为Grid布局。以下是具体的解决方案：

首先，将需要垂直居中的div放置在一个父容器中，并将该父容器设置为display: grid。

#div-station, #div-weld {
    display: grid;
}

接下来，您可以使用Grid布局的align-items属性将div垂直居中，将其设置为center。

#div-station, #div-weld {
    display: grid;
    align-items: center;
}

最后，将您的代码放入上述的HTML结构中。

<div id="div-station">
    <div id="station1">工位1</div>
    <div id="station2">工位2</div>
</div>

<div id="div-weld">
    <div id="s1" class="工位1">
        <div class="weld" id="s1-weld1" onclick="weldClick(this)">焊枪1</div>
        <div class="weld" id="s1-weld2" onclick="weldClick(this)">焊枪2</div>
        <div class="weld" id="s1-weld3" onclick="weldClick(this)">焊枪3</div>
        <div class="weld" id="s1-weld4" onclick="weldClick(this)">焊枪4</div>
        <div class="weld" id="s1-weld5" onclick="weldClick(this)">焊枪5</div>
        <div class="weld" id="s1-weld6" onclick="weldClick(this)">焊枪6</div>
        <div class="weld" id="s1-weld7" onclick="weldClick(this)">焊枪7</div>
        <div class="weld" id="s1-weld8" onclick="weldClick(this)">焊枪8</div>
    </div>
</div>

这样，您的div应该会在Grid布局中垂直居中显示。

【相关推荐】

• 这篇博客: CSS系列之你能实现多少种水平垂直居中的布局中的 1.5、grid 布局 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^