It is a common situation, that you want to put some element (like text, image or div) in the center (horizontally and vertically) of parent element (DIV). Setting some element in the center horizontally is usually quite easy – just put CSS rule margin: 0 auto to element or text-align: centerto its parent element (when child element has CSS rule: display: inline-block)and it is done.
But when we want to put HTML element in a center vertically and horizontally at once – then it is not so easy! You can try to use CSS rule “vertical-align: middle;” but quickly you will discover that it is not so easy to use. It often works not as we expect. Check code below, of course, vertical-align: middle is not working as we want.
Table of Contents
CSS center vertically and horizontally in a parent element by positioning change
In general, I mean by “parent element” some block element, so this can be div or figure or header or footer or many many more elements. To center some element vertically and horizontally in parent element (e.g. in parent div) we must use one trick and combine two rules from CSS3.
- We must set CSS height (and optionally width) and “position: relative;” rule to parent element.
- Set to child element CSS rule “position: absolute” – with that we can do a magic.
- Now we set CSS child position for top and left to 50%. remember, the base of the co-ordinate system is located in top left corner of parent element.
- And to finish it, to center child we set CSS translation to child element to -50% horizontally and vertically. Using translation remember that the base of the co-ordinate system is located in top left corner of child element.
I will describe shortly what does it mean in practice. So to center horizontally and vertically image, div, text etc. in the center of parent element (like div) we must set its CSS positioning to “absolute” and to parent “relative”. Parent must be positioned relative because than positioning coordinates (0, 0) of child elements starts in top left corner of parent element.
Otherwise absolute positioning will have a “starting point” of coordinates (0, 0) in top left corner in first ancestor element with relative positioning.
So at the moment we are in place where our child element’s beginning is centered, so it means it is too far to right and down to be fully centered horizontally and vertically in CSS.
So now we will use translation of child element. CSS rule of translation has coordinates starting in top left corner of the child element. So when we will set rules to translate it -50% both, in X and Y axis, than this will be moved to top and left for 50% of child element’s width and height.
So finally, we will have a child element (image, text or div with any content) positioned in CSS fully in the center of the parent element (div).
But maybe some challenge will be here the responsiveness – when browsers window will get narrow.
Check code below 🙂
HTML
<div class="parent"> <div class="inner"></div> </div>
CSS
.parent {
background: blue;
height: 300px;
position: relative;
}
.inner {
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}RESULTS
CSS center vertically by vertical-align: middle
First example was quite sophisticated but its biggest advantage is that it always position child element in the center of parent element, and it works perfectly. I will show now how to position in center vertically and horizontally child element in parent without changing element’s rule of position.
First I will show example which will not work, next I will modify it and second example will be working properly.
HTML
<div class="parent"> <div class="inner"></div> </div>
CSS
.parent {
background: blue;
height: 200px;
}
.inner {
width: 100px;
height: 100px;
background: green;
margin: 10px auto;
vertical-align: middle;
}RESULTS
And as you can see, it is not working 😉 vertical-align: middle works in different way than we could think. We need to have 2 or more child elements, then it could be aligned one to another. Analyze example below to check it.
HTML
<div class="parent"> <div class="inner first"></div> <div class="inner second"></div> </div>
CSS
.parent {
background: blue;
text-align: center;
height: 300px;
}
.inner.first {
height: 200px;
}
.inner {
display: inline-block;
width: 100px;
height: 100px;
background: green;
vertical-align: middle;
}RESULTS
And that’s it! 🙂
