display: flex text-align align-items justify-content 居中测试过程

display: flex text-align align-items justify-content 居中测试过程

刚刚接触HTML CSS，想记录一下我自学中遇到的很小白的问题。

此次练习的目的是将下图中2222水平竖直居中在浅灰色方块中。
遇到的问题是使用display: flex之后，text-align居中失效。使用了align-items justify-content之后虽然效果达到了，但是很好奇为什么text-align居中失效，经过几次测试，本小白大概搞懂了。我个人来说，各种概念看过之后没有实践还是理解不够透彻。

HTML代码如下：

<div class="mainbody">
    <div class="line">
        <div class="left">
            <h3>2222</h3>
        </div>
        <div class="right">
            <p></p>
        </div>

    </div>
    
</div>

CSS代码如下：

.left{    
    background-color: rgb(170, 170, 170);
    height: 100px;
    width: 100px;
}
h3
}

为了更清楚的显示，我给文字加了背景色。
给2222添加背景色并使用text-align: center。

h3{
    text-align: center;
    background-color: hotpink;

}

现在可以看到h3三的宽度和灰色块相等，且2222居中。
然后对2222的上级块添加display: flex，并使用align-items: center完成垂直居中。

.left{    
    /* display: flex; */
    /* 布局 */    
    /* align-items: center; */
    background-color: rgb(170, 170, 170);
    height: 100px;
    width: 100px;
}
h3{
    text-align: center;
    background-color: hotpink;

}

然后效果变成了下面这个样子，我在没有加2222的背景色时，完全看不懂为什么text-align: center会失效。现在就比较清晰。怪不得叫弹性盒子。使用了之后不规定边界就直接绷紧。

将h3宽度调一下，看看效果。

h3{
    text-align: center;
    background-color: hotpink;
    width: 80px;
}

所以text-align居中并没有失效，确实只在行内起作用。此处如果不调节h3的宽度。还是需要使用块级居中。

最终效果。

.left{    
    display: flex;
    /* 布局 */    
    align-items: center;
    justify-content: center;
    /* 居中 */

    background-color: rgb(170, 170, 170);
    height: 100px;
    width: 100px;
}
h3{
    /* text-align: center; */
    background-color: hotpink;
    /* width: 80px; */

}

本文地址：https://blog.csdn.net/morning1216/article/details/107295827