Different Ways for aligning an element Vertically-Center in HTML using CSS

Aligning an element the way we want is never an easy task, especially when a non-UI developer is doing it and this problem worsens when we try to align that element Vertically-Center. Although doing it using patches is not difficult, but doing it the right way is a challenge.

Here you’ll find some cool CSS techniques by which you can easily Vertically-Center align any element.

Below find the html snippet:

<div class="parent">

    <div class="child">Content</div>

</div>

Given below are the CSS protocols, which can be applied to align the child element in the center of the parent element.

Table Method

.parent {

	display:table;

}

.child {

	display:table-cell;
	vertical-align:middle;

}

Flexbox Layout Method

.parent {

	display: -webkit-flexbox;
 	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-align: center;
  	-ms-flex-align: center;
  	-webkit-align-items: center;
 	align-items: center;
  	text-align: center; 

}

Translate() Method

.parent {

	position: relative;

}

.child {

   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -25%;
   margin-top: -25%;
   transform: translate(-50%, -50%);
   width: 40%;
   height: 50%;

}

Absolute Positioning and Stretching Method

.parent {

	position: relative;

}

.child {

   	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;

}

I have tried my best to keep it as simple as possible, and it should solve your purpose that too conventionally.

Cheers!!!