Bootstrap轮播图标题全屏幕垂直居中适配问题求助

你当前用固定bottom值调整标题位置，这种硬编码方式会在不同屏幕高度下出现偏移。要让标题在所有屏幕尺寸下都垂直居中，改用Flexbox布局是最可靠的方式，具体修改如下：

修改后的CSS代码 #

/* 基础样式：用Flexbox实现垂直水平居中 */
.carousel-item {
  height: 100vh;
  min-height: 300px;
  position: relative; /* 确保子元素绝对定位基于此容器 */
}

.carousel-caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; /* 确保文本居中 */
}

.carousel-caption h5 {
  font-size: 45px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 25px;
}

.carousel-caption p {
  width: 60%;
  margin: auto;
  font-size: 18px;
  line-height: 1.9;
}

/* 平板屏幕适配 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .carousel-caption p {
    width: 100%;
    font-size: 50px;
  }
}

/* 移动端屏幕适配 */
@media only screen and (max-width: 767px) {
  .navbar-nav {
    text-align: center;
  }
  .carousel-caption h5 {
    font-size: 17px;
  }
  .carousel-caption a {
    padding: 10px 15px;
    width: 100%;
  }
  .carousel-caption p {
    width: 100%;
    line-height: 1.6;
    font-size: 12px;
  }
}

关键说明 #

• 将.carousel-caption设置为绝对定位并占满整个父容器（.carousel-item），通过display: flex+justify-content: center实现垂直居中，align-items: center实现水平居中
• 彻底移除所有针对.carousel-caption的bottom属性（包括媒体查询里的!important规则），避免固定值导致的偏移问题
• 保留了你原来针对不同屏幕的文本大小、宽度等适配规则，仅修改定位逻辑

这样修改后，无论全屏大屏还是小屏设备，轮播标题都会始终保持在轮播图的垂直居中位置。

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