用bootstrap让子元素纵向居中

在Bootstrap中，要使子元素（比如一个div或者其他块级元素）在父容器内垂直居中，你可以使用以下几种方法：

1. **Flexbox布局**：Bootstrap 4 引入了 Flexbox 支持，可以直接利用其内置的对齐功能。将父容器设置为 `display: flex; justify-content: center; align-items: center;`，子元素会自动垂直居中。

   <div class="parent container">
     <div class="child d-flex justify-content-center align-items-center"> <!-- .d-flex 是添加了 Flexbox 的类 -->
       子元素内容
     </div>
   </div>

2. **CSS Grid布局**：对于更复杂的布局，可以考虑使用 CSS Grid。同样地，设置父元素的 `display: grid; place-items: center;` 可以实现垂直居中。

   <div class="parent container grid-container">
     <div class="child grid-item"> <!-- 使用grid-item或其他的grid类 -->
       子元素内容
     </div>
   </div>

3. **绝对定位**：如果你不想依赖 Bootstrap 的新特性，可以通过 `position: absolute` 和 `top: 50%` 来实现，然后向下移动元素半高：

   <div class="parent container">
     <div class="child" style="position: relative;">
       <div class="child-inner" style="position: absolute; top: 50%; transform: translateY(-50%);"> 子元素内容 </div>
     </div>
   </div>

在这三种情况下，`.child` 或者 `.child-inner` 就是你的子元素，确保它们有一个明确的宽度和高度，以便正确居中显示。