Bootstrap center-block类无法垂直居中图片问题求助

你说给Torza的图片和社交图标容器加了center-block类，想实现垂直居中却没达到预期，我来帮你捋捋问题出在哪，以及怎么解决~

先看看你的布局截图：

还有你提供的代码：

<?php 
<div class="container"> 
  <hr /> 
  <div class="text-center center-block"> 
    <a href="https://torza.nl" target="_blank"><img src="img/logo_torza.png" alt="Torza" width="85"></a> 
    <a href="https://torza.nl" target="_blank"><i class="fa fa-globe fa-2x social"></i></a> 
    <a href="https://www.linkedin.com/company/torza/" target="_blank"><i class="fa fa-linkedin-square fa-2x social"></i></a> 
    <a href="https://www.facebook.com/torzanl" target="_blank"><i class="fa fa-facebook-square fa-2x social"></i></a> 
    <a href="mailto:info@torza.nl"><i class="fa fa-envelope-square fa-2x social"></i></a> 
  </div> 
  <hr /> 
</div> 
?>

问题根源 #

首先得明确：center-block（一般是Bootstrap提供的类）只负责水平居中块级元素，它的核心样式是margin: 0 auto; display: block;，完全没有垂直居中的能力。所以你用它来实现垂直居中，自然达不到效果啦。

针对性解决办法 #

根据你的需求，分两种常见场景给你方案：

场景1：让logo和社交图标互相垂直对齐

从截图看，logo是图片，图标是字体图标，默认基线对齐可能导致视觉上不在同一水平线，看起来没居中。给这些元素加垂直对齐样式就行：

.text-center img,
.text-center .social {
  vertical-align: middle;
}

这样logo和图标就能整齐地在同一水平线上居中对齐了。

场景2：让整个logo+图标容器在两条hr之间垂直居中

如果是想让中间的容器在上下分隔线之间垂直居中，推荐用现在最便捷的Flexbox布局：

1. 先给父容器（也就是.container）加Flex样式：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px; /* 这里设置你需要的容器高度，比如想占满屏幕高度就用100vh */
}

2. 另外，center-block在这里其实没用——因为text-center已经能让行内/行内块元素（你的logo和图标都是这类）水平居中，所以可以把center-block类去掉，避免样式冲突。

如果需要兼容旧浏览器（比如IE10及以下），可以用表格布局方案：

.container {
  display: table;
  width: 100%;
  min-height: 200px;
}
.text-center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

同样能实现垂直居中效果。

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