如何在Bootstrap中响应式垂直居中div内的h5元素

嘿，这个需求太常见了！不用给父元素固定高度也能实现垂直居中，而且完全适配响应式场景，给你几个靠谱的方案：

方案1：Flexbox布局（最推荐，现代浏览器首选） #

这是目前最简洁灵活的方式，父元素高度会自动随内容撑开，完美支持响应式：

.channelTab {
  display: flex;
  align-items: center;
  /* 你的Bootstrap col-10类已经处理了宽度，这里不需要额外设置宽度 */
}

#channelName {
  margin: 0; /* 去掉h5默认的上下外边距，避免多余间距影响居中效果 */
}

原理：align-items: center 会让子元素在垂直方向上居中，父元素的高度完全由内部内容决定，不管屏幕尺寸怎么变，居中效果都能保持。

方案2：CSS Grid布局（同样简洁，适合简单布局） #

和Flexbox效果一致，语法也很简单：

.channelTab {
  display: grid;
  align-items: center;
}

#channelName {
  margin: 0;
}

这个方案和Flexbox一样，都是现代浏览器支持的标准布局方式，适合快速实现居中。

方案3：兼容旧浏览器的 fallback 方案（比如 IE10 及以下） #

如果需要兼容比较老的浏览器，可以用这个方法：

.channelTab {
  /* 不需要固定高度，让高度随内容自适应 */
}

#channelName {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

注意：这个方法如果父元素里有其他内联元素，可能需要微调，但对于你当前的单h5元素场景完全适用。

另外补充：你用到的Bootstrap col-10 类已经帮你处理了响应式宽度，所以上面的样式直接叠加在 .channelTab 上就好，不会破坏原有的响应式效果。

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