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:
[java]
<div class="parent">
<div class="child">Content</div>
</div>
[/java]
Given below are the CSS protocols, which can be applied to align the child element in the center of the parent element.
Table Method
[java]
.parent {
display:table;
}
.child {
display:table-cell;
vertical-align:middle;
}
[/java]
Flexbox Layout Method
[java]
.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;
}
[/java]
Translate() Method
[java]
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
margin-left: -25%;
margin-top: -25%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
}
[/java]
Absolute Positioning and Stretching Method
[java]
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
[/java]
I have tried my best to keep it as simple as possible, and it should solve your purpose that too conventionally.
Cheers!!!
