Horizontal and Vertical Centering in CSS

Horizontal and vertical centering in CSS has been a boss for the css newbies who din't know the right way on centering elements in CSS and here is a guide on how to horizontally and vertically center elements in css. There are a few scenarios in this case. And lets deal with all of them.

Images :

1. Know Dimensions Horizontal and Vertical Center :

And so let us you are in such a situation where you are having an image with known dimensions and you want to center the image both horizontally and vertically so that it is in the dead center of the page. Then you can do something like the follows :

<style>

img {
position: absolute;
top: 0;
left: 0;
top: 50%;
margin-top: -250px; //half the height of the image - vertical alignment
left: 50%;
margin-left: -250px; //half the width of the image - horizontal alignment
}
</style>
<img src = "images/1.jpg" width = "500" height = "500">

OUTPUT 

This is the best way to align an image of a known width and height. What if you don't know the width and the height of the image that you are displaying for example if you are displaying images dynamically then you would not be knowing the width and height. So to align them take a look at the next scenario.

2. Unknown Dimensions - Dead Center Align :

To align an image in such a case you first need to create a div and let that div be the parent. The image would be a child in this case and so now you can easily align the image in the dead center of the div.

If you want to align the image in the dead center of the page then just expand the div to the entire page by using a width and a height of 100%.

<style>

#parent{
position: relative;
background-color: #d1d1d1;
width: 80%;  //this is your choice. But make sure you use % instead of pixels
height: 80%;  //this is your choice. But make sure you use % instead of pixels
}

#parent img {
position: absolute;
top: 5%;                           //vertical alignment
bottom: 5%;                  //vertical alignment
margin: auto;               //horizontal alignment
left: 0;
right: 0;
max-width: 70%;    //this is your choice. But make sure you use % instead of pixels
max-height: 70%;   //this is your choice. But make sure you use % instead of pixels
}

</style>

<div id = "parent">
<img src = "images/1.jpg">
</div>

And so the the image now has been dead center aligned ! So now lets see on how to align a text element.

Text

1. Dead Center of the Body :

Add the following code to your text editor. Make sure that the javascript comes after your element's markup.

<style>
p{
text-align: center; //horizontal align
}
</style> 

<p id = "new">Hello World</p>

<script>
var height = window.innerHeight;
alert(height);
document.getElementById("new").setAttribute("style","line-height: " + height +"px;");   //vertical align
</script>

2. Dead Center of a DIV :

It is easier to align text in the dead center of a div than the dead center of the body. This does not include javascript if you know the height of the div. Use the code below for the purpose :

<style>

div {
border: 1px solid #000;
height: 300px;
width: 300px;
}

p{
text-align: center;
line-height: 300px;  //same as height of parent div
}

</style>

<div>
<p>Hello World</p>
</div>

And so that is it for this short tutorial. You can now easily horizontally and vertically align both images and text in your markup.  Stay tuned for more and Happy Coding :)

Tweet