Bootstrap 4 页脚中上下固定居中对齐两个div的实现问题

嘿，我完全懂你的感受——明明是基础布局需求，偏偏因为Bootstrap的样式冲突搞得头大，尤其是排查不出问题的时候。别慌，我给你一套直接复制就能用的代码，彻底绕开Bootstrap footer类的未知冲突，完美实现你要的效果：

核心思路 #

不用依赖Bootstrap自带的footer类，我们自己写极简的自定义样式：

• 用position: fixed把容器固定在页面底部
• 用Flex布局让两个子div自动上下排列，同时实现整体居中
• 强制文本居中，避免Bootstrap默认样式干扰

直接可用的代码 #

<!-- 固定在底部的容器 -->
<div class="custom-footer">
  <div class="footer-item">第一个div的文本内容</div>
  <div class="footer-item">第二个div的文本内容</div>
</div>

<style>
/* 自定义底部容器样式 */
.custom-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  /* 用Flex实现垂直排列+居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 可选：加个背景色区分 */
  background-color: #f8f9fa;
}

/* 子div样式，确保文本居中 */
.footer-item {
  text-align: center;
  margin: 5px 0; /* 可选：给两个div之间加间距 */
  /* 可选：限制宽度，避免文本太宽 */
  max-width: 800px;
  width: 100%;
}

/* 可选：给body加底部内边距，避免页面内容被底部容器遮挡 */
body {
  padding-bottom: 80px; /* 数值根据你的底部容器高度调整 */
}
</style>

为什么这个方案能解决你的问题 #

你之前用display: inline-table时两个div能显示，但改成block就消失，大概率是因为没有给父容器设置合适的定位和布局规则——Bootstrap的默认样式可能悄悄修改了父元素的高度、溢出规则，导致block元素被隐藏。而我们用Flex布局的垂直排列（flex-direction: column），能让两个子div自动上下堆叠，不会出现消失的问题，同时align-items: center保证整体居中，text-align: center让每个div里的文本也居中。

如果需要调整间距、背景色或者高度，直接修改CSS里的对应属性就行，完全不受Bootstrap footer类的影响~

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