Question

我想水平对齐div的中心和红色边框，并在图像中间垂直对齐。垂直对齐中间工作但水平对齐中心不起作用。这是我的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

水平对齐将div与红色边框对齐

2 个答案: