用红色边框水平对齐 div [重复]答案

【问题标题】：horizontally align center the div with red border [duplicate]用红色边框水平对齐 div [重复]
【发布时间】：2018-08-25 04:41:11
【问题描述】：

我想将 div 与红色边框水平对齐并垂直对齐图像中间。垂直对齐中间有效，但水平对齐中心无效。这是我的代码：

.vcenter {
  display: table-cell;
  vertical-align: middle;
}

<div class="text-center" style="border: 1px solid black;padding-bottom:10px; width:100%;height:100%;">
  <h2>xyz</h2>

  <div style="height: 500px;width: 500px;border: 1px solid red; text-align: center; margin: 0 auto" class="vcenter center-block"><img src="" alt="Cinque Terre" width="304" height="236">
  </div>

</div>

【问题讨论】：

如果.vcenter 是垂直对齐的，那么h2 在您的代码中的作用是什么？
你范只需更改display .vcenter { display: block; vertical-align: middle; }

标签： html css twitter-bootstrap-3

【解决方案1】：

.vcenter {
  display: flex;
  justify-content:center; //making content center;
  align-items:center; //vertical align to middle of div  
}

<div class="text-center" style="border: 1px solid black;padding-bottom:10px; width:100%;height:100%;">
  <h2>xyz</h2>

  <div style="height: 500px;width: 500px;border: 1px solid red; text-align: center; margin: 0 auto" class="vcenter center-block"><img src="" alt="Cinque Terre" width="304" height="236">
  </div>

</div>

【讨论】：

是的，它有效。谢谢大家。

【解决方案2】：

.vcenter {
  display: table-cell;
  vertical-align: middle;
}
.text-center div{
  display: flex;
}

<div class="text-center" style="border: 1px solid black;padding-bottom:10px; width:100%;height:100%;">
  <h2>xyz</h2>

  <div style="height: 500px;width: 500px;border: 1px solid red; text-align: center; margin: 0 auto" class="vcenter center-block"><img src="" alt="Cinque Terre" width="304" height="236">
  </div>

</div>

【讨论】：