How can I vertically align the contents of a div to middle?

Question

I've tried using the bootstrap 4 classes 'align-middle' and 'align-content-center' to make the contents of the parent div vertically align in the middle. But applying these classes does not give the result I want. The contents are still positioned at the top.

<div class="embed-responsive embed-responsive-1by1" style="background:blue; height:10000px">
  <div class="embed-responsive-item">
    <div style="vertical-align: middle;">
      <span class="h4" style="color:white; font-size: 34px;">The text I want to vertically align in the middle</span></div>
  </div>
</div>

Which version of Bootstrap and why have you not included that in the demo. If you have used the appropriate classes, show **that** *not working*. — Paulie_D, Dec 18 '19 at 16:13
@Paulie_D I am using bootstrap 4. Do you know how I can include the bootstrap library in the demo? — Nathan, Dec 18 '19 at 16:15

Nitheesh · Answer 1 · 2019-12-18T16:31:58.847

With pure CSS you can achieve this by using display: flex; align-items: center;

<div class="embed-responsive embed-responsive-1by1" style="background:blue; height:300px; display: flex; align-items: center;">
  <div class="embed-responsive-item">
    <div style="vertical-align: middle;">
      <span class="h4" style="color:white; font-size: 34px;">The text I want to vertically align in the middle</span></div>
  </div>
</div>

In Bootstrap 4 the embed-responsive-item class will add position: absolute; which break the layout. Remove that and add row class for parent and col-sm-12 align-self-center for child. That will work.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row embed-responsive embed-responsive-1by1" style="height:2000px;border:1px solid gray">
    <div class="col-sm-12 align-self-center">
      <span>.align-self-center</span>
    </div>
  </div>
</div>

Why this answer was downvoted? If anything wrong, please put a comment so that it could be corrected. — Nitheesh, Dec 19 '19 at 02:15

How can I vertically align the contents of a div to middle?

1 Answers1