如何让带背景图的div容器内的h3文本实现垂直居中？

解决方案 #

你只需要修改.promo-item的样式，增加Flex布局相关属性即可实现h3的垂直居中，修改后的样式规则如下：

.promo-item {
    height: 400px;
    /* 新增3行代码 */
    display: flex;
    align-items: center;
    justify-content: center;
}

方案说明

• display: flex将容器设置为弹性布局
• align-items: center实现子元素在垂直方向上居中对齐
• justify-content: center实现子元素在水平方向上居中对齐，你原有代码中h3的text-align: center可以保留，两者没有冲突

如果你需要兼容更旧版本的浏览器（如IE9及以下），可以用绝对定位方案实现，修改代码如下：

/* 给父容器加相对定位 */
.promo-item {
    height: 400px;
    position: relative;
}
/* 给h3加绝对定位偏移 */
.promo-item h3 {
    font-size: 40px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

以上两种方案都不需要修改你现有的HTML结构，直接替换对应样式规则即可生效。

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