div内文本无法居中？求助Flex布局下文本水平垂直居中方法

你当前代码里的问题是：align-items: center是Flex容器专属属性，只有当元素本身被设置为flex容器时才会生效，但你的.parent div并没有添加display: flex，所以这个属性完全不起作用，导致文本无法垂直居中。

下面是几种可行的解决方法：

方法1：将子div转为Flex容器（推荐，支持多行文本） #

给每个子div添加display: flex，再通过justify-content: center（水平居中）和align-items: center（垂直居中）实现双居中：

.parent div {
    width: 300px;
    height: 50px;
    background-color: rgba(197, 197, 197, 0.788);
    border: #000000 solid 2px;
    border-radius: 10px;
    margin: 10px;
    transition-duration: 3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

这种方法的优势是即使文本换行，依然能保持垂直居中效果。

方法2：利用line-height（仅适合单行文本） #

因为子div的高度固定为50px，设置line-height: 50px，配合text-align: center就能快速实现双居中：

.parent div {
    width: 300px;
    height: 50px;
    background-color: rgba(197, 197, 197, 0.788);
    border: #000000 solid 2px;
    border-radius: 10px;
    margin: 10px;
    transition-duration: 3s;
    text-align: center;
    line-height: 50px;
}

注意：如果文本是多行，这种方法会导致行间距过大，不适用。

方法3：使用Grid布局（简洁高效，支持多行文本） #

通过display: grid和place-items: center一行代码搞定双居中：

.parent div {
    width: 300px;
    height: 50px;
    background-color: rgba(197, 197, 197, 0.788);
    border: #000000 solid 2px;
    border-radius: 10px;
    margin: 10px;
    transition-duration: 3s;
    display: grid;
    place-items: center;
}

Grid布局的place-items是align-items和justify-items的简写，能同时控制垂直和水平方向的居中对齐。

内容的提问来源于stack exchange，提问作者Dude1986