Can you vertically center in CSS?
How to vertically center in CSS (Cascading Style Sheet)? Well if it’s not the most but it’s definitely one of the most asked question by lot’s of developers who are somewhat experienced or just starting to learn web development.
So, what is a best way to vertically center in CSS? Well, there is more than one way of vertically centering things in CSS. But you should only pick the one which has better browser support and easy to implement.
First we are gonna begin with those methods that have better web browser support & at the end we will look at methods that have less browser support.
Let’s begin…
Vertical Centering with Position Absolute:
Let’s say we have an image and we want to center it, First we need to create a div element and an image inside it in HTML and then give it some styles.
HTML
-----<div>
<img src=”http://bit.ly/2jeCm3H" alt=”” />
</div>-----
CSS
-----body{
background: #ccc; /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
}
Now we have an image inside a div, We gave some dimension to both our image and div element and we also added a background of #fff on div element.
Now we need to add property of position relative to our parent element and position absolute to our child element which in our case is image element.
div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
}Now, We are going to give top of 50% to our child element.
div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
top: 50%;
}It’s no vertically center yet, Now all you have to do to vertically center it is to give it a negative margin from top, of half the height of the element you are centering which in our case is image element.
div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px; /* half the size of image */
}
Remember: If you also want to center it horizontally then you can use the same trick that we used to center it vertically.
Vertical Centering with Display: table;
Yes, you heard me right! We can use display table to center things vertically in our website. How? Well! that’s what am just about to show you.
First we are gonna create a div element and another div element with an image inside it, then we are going to give it some styles.
HTML
-----<div>
<div id="img"><img src="http://bit.ly/2jeCm3H" alt="" /></div>
</div>-----
CSS
-----body{
background: #ccc; /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
}
Now, We need to give a display of table to our parent element.
div{
width: 300px;
height: 250px;
background: #fff;
display: table;
}
img{
width: 100px;
}Now, give display of table-cell to the the div that is wrapping image element.
div{
width: 300px;
height: 250px;
background: #fff;
display: table;
}
img{
width: 100px;
}
div#img{
display: table-cell;
}It’s probably not center yet, Right? Exactly, Now to vertically center it all we need to do is give the div element that is wrapping our image element a property of vertical-align: middle;
div{
width: 300px;
height: 250px;
background: #fff;
display: table;
}
img{
width: 100px;
}
div#img{
display: table-cell;
vertical-align: middle;
}
Note: If you also want to center it horizontally then just add property of text-align: center to the main div element and not the div with id=”img”
Vertical Centering with Flexbox
Last but not least you can use flexbox to center things vertically on your website. Flexbox is not probably the best choice to center things vertically or horizontally due to less browser support and IE 8,9 not supporting it at all.
You can check browser support here: Click Here
Now, to vertically center in flexbox first we need to create a div element and an image inside it, then give it some basic styles.
HTML
-----<div>
<img src=”http://bit.ly/2jeCm3H" alt=”” />
</div>-----
CSS
-----body{
background: #ccc; /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
height: 100px; /* you must give height so it doesn't expand */
}
Now, We need to give div element a display of flex.
div{
width: 300px;
height: 250px;
background: #fff;
display: flex;
}
img{
width: 100px;
height: 100px; /* you must give height so it doesn't expand */
}Still not center yet? Hold on! Now all we need to do is add one more property to our div element and that’s align-items: center;
div{
width: 300px;
height: 250px;
background: #fff;
display: flex;
align-items: center;
}
img{
width: 100px;
height: 100px; /* you must give height so it doesn't expand */
align-items: center;
}
That’s it, Now you know how to vertically center in CSS. I hope you learned some great stuff through this article and if you still have some question then feel free to comment below and I’ll be more than happy to answer them.
or you can tweet @AmJustSam
If you haven’t read my previous article on how to center horizontally then you can read it now, All you have to do is — Click Here
Keep Coding….
