html - div 中垂直/水平居中的具体问题

Question

在下面的代码中，我尝试将红色 block 内的图像垂直/水平居中。请注意，在 block 之后有一个居中的文本。

我想这很简单，但我已经尝试了很多解决方案( 1 、 2 、 3 、 4 、 5 )，它仍然无法按预期工作...

JSFiddle

.parent {
  text-align: center;
  width: 33%;
  float: left;
}

.child {
  background-color: red;
  height: 150px;
  width: 150px;
  display: inline-block;
  vertical-align: middle;
}

<div class="parent">
  <div class="child">
    <img src="http://dlg.galileo.usg.edu/images/Historic_Architecture_and_Landscapes.gif" />
  </div>
  <p>Legend of the block</p>
</div>

<div class="parent">
  <div class="child">
    <img src="http://dlg.galileo.usg.edu/images/Historic_Architecture_and_Landscapes.gif" />
  </div>
  <p>Legend of the block</p>
</div>

<div class="parent">
  <div class="child">
    <img src="http://dlg.galileo.usg.edu/images/Historic_Architecture_and_Landscapes.gif" />
  </div>
  <p>Legend of the block</p>
</div>

约束:

我显示了几个 block ，width:33% 和 float: left 来自 Bootstrap 类，不能删除。

Answer 1

只需使用下面的 CSS 代码

.child {
    background-color: red;
    height: 150px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

更新 fiddle click here

.parent {
  text-align: center;
  width: calc(100% /3);
  float: left;
}
.child {
  background-color: red;
  height: 150px;
  width: 150px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <div class="child">
    <img src="http://dlg.galileo.usg.edu/images/Historic_Architecture_and_Landscapes.gif" />
  </div>
  <p>Legend of the block</p>
</div>

<div class="parent">
  <div class="child">
    <img src="http://dlg.galileo.usg.edu/images/Historic_Architecture_and_Landscapes.gif" />
  </div>
  <p>Legend of the block</p>
</div>

<div class="parent">
  <div class="child">
    <img src="http://dlg.galileo.usg.edu/images/Historic_Architecture_and_Landscapes.gif" />
  </div>
  <p>Legend of the block</p>
</div>