无法在<div>标签中垂直居中<h2>元素的技术求助

问题根源 #

你的代码错误地将Flexbox属性加在了h2标签上，父容器div未设置垂直居中相关属性，且h2默认的上下margin会干扰对齐效果。另外align-content仅适用于多行Flex容器，单行场景需用align-items。

方法一：父容器使用Flexbox（推荐） #

将div设为inline-flex容器，通过内置属性直接实现水平+垂直居中，h2无需额外Flex设置：

div {
    display: inline-flex; /* 保留行内特性同时开启Flex */
    background-color: green;    
    width: 130px;
    height: 45px;
    margin-top: 20px;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
h2 {
    font-size: 20px;
    font-weight: 100;
    margin: 0; /* 清除h2默认上下margin */
}

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

若h2为单行文本，可通过设置div的line-height等于自身高度实现垂直居中：

div {
    display: inline-block;
    background-color: green;    
    width: 130px;
    height: 45px;
    margin-top: 20px;
    text-align: center;
    line-height: 45px; /* 行高与容器高度一致 */
}
h2 {
    font-size: 20px;
    font-weight: 100;
    margin: 0; /* 清除默认margin */
    line-height: inherit; /* 继承父元素行高，避免文本偏移 */
}

方法三：使用Grid布局 #

给div设置inline-grid布局，通过place-items一键实现双方向居中：

div {
    display: inline-grid;
    background-color: green;    
    width: 130px;
    height: 45px;
    margin-top: 20px;
    place-items: center; /* 同时水平、垂直居中 */
}
h2 {
    font-size: 20px;
    font-weight: 100;
    margin: 0;
}

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