Bootstrap 4 - 垂直对齐问题求助：文本无法垂直居中

嘿，我来帮你排查这个文本垂直对齐的问题～首先看你给出的代码，问题出在你的#welcome容器只设置了相对定位和最小高度，但没有添加任何让内部元素垂直居中的规则，所以文本会默认从容器顶部开始排列，自然没法垂直对齐。下面给你几个实用的解决方案，结合你用的Bootstrap 4来优化：

方案一：用Bootstrap自带的flex类（最简便） #

Bootstrap 4本身就提供了flex布局的辅助类，直接给你的section标签添加d-flex和align-items-center类就能实现内部元素垂直居中，不需要额外写太多CSS：

修改后的HTML代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="welcome" class="bg-primary text-black d-flex align-items-center">
  <div class="container">
    <!-- 你的文本内容 -->
    <h1>欢迎来到我的页面</h1>
    <p>这是我的第一篇帖子，感谢帮忙排查问题</p>
  </div>
</section>

你的原有CSS可以保持不变，Bootstrap的类会自动帮你处理flex布局和垂直对齐的样式。

方案二：自定义CSS实现flex垂直居中 #

如果不想依赖Bootstrap的类，也可以自己给#welcome添加flex相关的CSS属性，同样能实现效果：

修改后的CSS代码：

#welcome{ 
  position:relative; 
  min-height:400px; 
  background:url('/img/nufc.jpg'); 
  background-size:cover; 
  background-attachment:fixed; 
  color:#fff;
  display: flex;
  align-items: center; /* 核心：垂直居中内部元素 */
  justify-content: center; /* 如果需要同时水平居中，就加上这行 */
}

HTML结构保持你原来的就行，这样内部的容器会自动垂直居中。

方案三：兼容旧浏览器的绝对定位法 #

如果需要兼容一些不支持flex布局的旧浏览器，可以用绝对定位结合transform的方式：

添加对应的CSS：

#welcome{ 
  position:relative; 
  min-height:400px; 
  background:url('/img/nufc.jpg'); 
  background-size:cover; 
  background-attachment:fixed; 
  color:#fff;
}

#welcome .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 这行代码会让元素同时水平和垂直居中 */
}

另外提醒你一下：你HTML里的text-black类和CSS里的color:#fff会有样式冲突，Bootstrap的text-black会把文本设为黑色，而你自己的CSS设的是白色，记得根据需求统一调整哦～

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