Mywebdunia's Blog

We all know how to align a table at the center. Just say <table cellspacing="0" cellpadding="0" align="center" wiidth="100%"> its gets the table aligned to the center of the page. In the same way how about aligning a div at the center of the page. There are a few different methods how to make it in the center.

Here are these methods

1. Using <center> tag
Ex:
<center>
<div class="xyz">Some content goes here…</div>
</center>

This will get the div aligned at the center along with this the content also gets aligned at the center. Well you might be knowing that the <center> tag is a deprecated tag[Read More]. So now is not receomended to use it. Still most of the browsers will allow you to use it. But this is not the feasible and recomended method.

2. Using align attribute
Ex:
<div class="xyz" align="center">Some content goes here…</div>

Also by using the above tag the div wount get aligned to center instead only the content gets aligned to the center. Align attribute is also a deprecated attribute, its no more recomended. So this is not the feasible and recomended method.

3. Using CSS attributes
Ex:

<div class="pqr">Some content goes here..</div>

<style type="text/css">
.pqr{
width:500px;
border:1px solid #666666;
margin: 0, auto;
}
</style>

By using the above style you can align the div at the center of the page. The margin=0 that is the top and bottom margin is 0 and the left and right margin is auto in the sense fill the gap automatically, by which the div gets aligned to the center, either of the whole page or within the block element. This is the best and recomended method to align a div at the center. This is tested in all the browsers.

Try this and test it on different browsers, if you find any issues let me know.