如何实现Bootstrap网格在页面中的垂直居中？

我来帮你搞定这个垂直居中的难题！你现在的水平居中没问题，但垂直居中失效的原因很明确：你的.board元素虽然用了vh-100占满了整个视口高度，但没有启用flex布局来控制子元素的垂直对齐方式。

下面给你两种最直接的解决方案，推荐用第一种Bootstrap原生类的方式，不用额外写CSS：

方案一：使用Bootstrap内置Flex类 #

直接给.board添加三个flex相关的类，就能实现整体垂直居中，同时保留原有的水平居中效果：

<div class="container-fluid"> 
 <div class="board vh-100 d-flex align-items-center flex-column"> 
 <div class="row t-row justify-content-center"> 
 <div class="col-4 tic-box">A</div> 
 <div class="col-4 tic-box">B</div> 
 <div class="col-4 tic-box">C</div> 
 </div> 
 <div class="row t-row justify-content-center"> 
 <div class="col-4 tic-box">D</div> 
 <div class="col-4 tic-box">E</div> 
 <div class="col-4 tic-box">F</div> 
 </div> 
 <div class="row t-row justify-content-center"> 
 <div class="col-4 tic-box">G</div> 
 <div class="col-4 tic-box">H</div> 
 <div class="col-4 tic-box">I</div> 
 </div> 
 </div> 
 </div>

每个类的作用：

• d-flex：将.board转换为flex容器，开启flex布局
• align-items-center：让子元素（也就是那三行）在垂直方向上居中对齐
• flex-column：保持子元素垂直排列，和你原来的三行布局结构一致

方案二：自定义CSS实现 #

如果你更倾向于用自定义样式，也可以给.board添加以下CSS：

.board {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

因为你已经给.board加了vh-100，所以不需要再重复设置height: 100vh了。

额外优化：让盒子内的文字也垂直居中 #

如果你还想让每个.tic-box里的字母（A、B、C...）也在盒子内部垂直居中，可以给.tic-box也加上flex类：

<div class="col-4 tic-box d-flex align-items-center justify-content-center">A</div>

或者修改你的CSS：

.tic-box { 
 border: solid black 1px; 
 font-size: 3vw; 
 width: 90px; 
 height: 90px; 
 display: flex;
 align-items: center;
 justify-content: center;
 }

这样文字就能在盒子里同时水平和垂直居中了。

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