horizontally align center the div with red border

Question

I want to horizontally align center the div with the red border and vertically align middle the image. Vertically align middle is working but horizontally align center is not working. Here is my code:

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

If the `.vcenter` is align vertically so what is the role of `h2` in your code.? — Jithin Raj P R, Mar 16 '18 at 07:31
You van simply change the `display` `.vcenter { display: block; vertical-align: middle; }` — Athul Nath, Mar 16 '18 at 07:38

score 2 · Accepted Answer · answered Mar 16 '18 at 07:35

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

Yes it works. Thank you all. – Boidurja Talukdar Mar 16 '18 at 07:45 — Boidurja Talukdar, Mar 16 '18 at 07:45

score 0 · Answer 2 · answered Mar 16 '18 at 07:34

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

horizontally align center the div with red border

2 Answers2