Vertically centering HTML element with CSS

Although centering HTML elements horizontally it is very easy, doing it vertically it's a bit tricky.

You might probably center an element horizontally by setting a margin: auto to a block element that has a fixed width or in another case (inline, inline-block, inline-flex) you might center it by setting a text-align: center to it's parent.

<div style="width: 200px; margin: auto;">
   I am a block element and I will be centered horizontally
</div>

                <div style="text-align: center">
   <span>
       I am an inline element and I will be centered horizontally
    </span>
</div>

For centering element vertically there are two cases:

1. When you know the height of element
2. When you do not know the height of element

Knowing the element height will make centering easy but this cases are rare as you probably might have the dynamic content placed inside this element. You need to set a position: relative to parent of this element and position: absolute to element itself.

<style>
.parent {
    position: relative;
    height: 300px; /* parent must have a height bigger then elementToBeCentered  */
}
.elementToBeCentered{
    position: absolute;
    top: 50%;
    height: 200px;
    margin-top: -100px;
}
</style>
<div class="parent">
    <div class="elementToBeCentered">
    	I will be vertically centered
    </div>
</div>

In case you do not know the height of your element you can use translate to position it.

		<style>
.parent {
    position: relative;
    height: 300px; /* parent must have a height bigger then elementToBeCentered  */
}
.elementToBeCentered{
    position: absolute;
    top: 50%;
	transform: translateY(-50%); /* this will move element up of its half size  */
}
</style>
<div class="parent">
    <div class="elementToBeCentered">
    	I will be vertically centered
    </div>
</div>
		

Another way to vertically center an element is by using flex. Making parent display: flex and align-items: center will position its child perfectly in center.

		<style>
.parent {
    display: flex;
    align-items: center;
	justify-content: center; /* horizontal centering in flex */
	height: 300px;
}
</style>
<div class="parent">
    <div class="elementToBeCentered">
    	I will be vertically centered
    </div>
</div>
		

These two methods are very easy and working like charm but when the height of element that we want to be centered it's bigger than the parent height we will have this overlap effect because the parent does not create the scrollbar. We really do not want this as we might have important message to show to users and they will not be able to read it.

To fix this problem we can use a different approach using table. Add 2 parents to element you want to center and make the first one display: table and the second one (child of the first element) display: table-cell . Also set a vertical-align: middle to this element.

		<style>
.firstParent {
    display: table;
	height: 200px;
}
.secondParent {
	display: table-cell;
	vertical-align: middle;
	text-align: center; /* to center it horizontally */
}
</style>
<div class="firstParent">
    <div class="secondParent">
    	<div class="elementToBeCentered">
			I will be vertically centered inside table
    	</div>
    </div>
</div>
		

With this approach you can be sure that the overlap problem will not happen as the table will create a scrollbar if the element inside has a bigger height than the table itself.