How to Vertically Center Align an Element in Bootstrap 4

Scenario is like this – there is a div and an element inside that div, let us say a span or a link element. This element needs to be middle aligned vertically inside the div.

Apparently there are several way to do this. I am showing you the easiest method.

Add class h-100 to the parent div.

<div class="row py-4 h-100"> <!-- This is the parent div -->
  <div class="col-md-12">
	<a class="" href="" rel="home"></a>			
  </div>			
</div>

This will make the parent div full height within whatever container you put it inside of.

Next add class my-auto to the div where the element is located.

<div class="row py-4 h-100"> <!-- This is the parent div -->
  <div class="col-md-12 my-auto"> <!- this is  the div where the element "span" is located -->
	<span class="">Home</span>			
  </div>			
</div>

my-auto is a bootstrap class that stands for auto margin along the y-axis (vertical axis).

This class is equivalent to

margin-top: auto;
margin-bottom: auto;

Save and test. The span element should now be vertically centered.

Leave a Reply

Your email address will not be published. Required fields are marked *