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