How to center align a Div or HTML element?

One of the most common queries all the new front End developers have is ” How do we center align a DIV? “.

Well, let me tell you that it is one of the easiest tasks. Let’s take a look at how to center align a Div.

Center align a Div horizontally

A Div can be easily center-aligned Horizontally using simple CSS properties. All that you need to do is to give the Div a width value less than 100% or less than its parent’s width and set the left and right margin to auto. The following example shows the CSS property required.

<style type="text/css">
.myDiv{
height:200px;
width:200px;
margin:0 auto;
}
</style>

<div class="myDiv">
Div data goes here
</div>

Center align an element vertically using CSS

Many a time you might want to Vertically center align a DIV or an element. In such cases you can do it using the transform property in CSS3 like shown in the following example:

The HTML :

<div class="wrapper">
  <div class="vertically-center">
    <p>This is vertically centered.</p>
  </div>
</div>

The CSS :

.wrapper { 
  height: 300px;
  position: relative;
  border: 2px solid blue; 
}

.vertically-center {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width:100%;
  text-align:center;
}

In the above example, you can notice that CSS3’s transform property has been used to vertically center align the div. This is one of the easy ways to vertically center align the DIV.

 Center align DIV Vertically using CSS display:table property

One of the other ways would be to use the “display:table” property. But hey, you need to set this property to the parent of the DIV you are trying to vertically center align. And the child DIV or the DIV u want to center align can have “display:table-cell” and “vertical-align:middle” properties. Let us take a look at an example.

<style type="text/css">
.parent{display:table;}

.child{
  display:table-cell; /* Change to inline-block on older versions of IE */
  vertical-align:middle;
}

</style>

<div class="parent">
    <div class="child">Content goes here</div><!-- Div to be center aligned -->
</div>

While this method works well in modern browsers, it might cause a little trouble on older browsers especially older versions of IE. On IE you can set the child DIV’s display as “inline-block“. You may use conditional comments for IE so that it becomes easy for you to target IE separately.

 Center align a Div vertically on older browsers

Sometimes you would want your Div to be center-aligned vertically. Unfortunately, the older browsers might not support the CSS3 way of doing it. An easy way would be to use javascript to handle the situation. The following function can help you center align a div vertically. It is built around jQuery but if need be you can convert it to a plain javascript version too.

//Usage : verticalAlign('classOfDiv');

function verticalAlign(elemClass){
var wndHeight = $(window).height();
	var divHght = $("."+elemClass).height();
	if(wndHeight > divHght){
		var diff = 	(wndHeight-divHght);
		var topMarginVal = (diff/2);
		$('.'+elemClass).css('margin-top',topMarginVal);
	}
}

Let us know if you were able to center align the DIV according to your requirement. Please leave a comment.