In this tutorial, you will learn how to center a div vertically and horizontall in css.
It is actually pretty easy to do, what you need to remember is to apply two properties of css which are display:table-cell and text-align:center. Remember that display:table-cell does not work in IE 7 and below, so we have to use a hack. Remember to include text-align:left to normalise the text-align behaviour inside the object that you want to center.
This is how the sample html code will look like:
<div id="outer"> <div id="inner"> <div id="boxinside">Enter the content in here...</div> </div> </div>
This is will be the css code:
/**** Remember to apply vertical-align to middle ****/ #outer{ width:600px; height:500px; background:#FF9; position:relative; vertical-align:middle; display:table-cell; } #inner{ width:100%; text-align:center; } /**** Remember to apply the auto margin and text-align to left ****/ #boxinside{ width:150px; height:150px; margin:0 auto; background:#666; text-align:left; color:#ffffff; } /**** HACK FOR IE 6 and 7 ****/ #inner{ *position:absolute; *top:50%; } #boxinside{ *top:-50%; *position:relative; } /**** END HACK FOR IE 6 and 7 ****/
Quick Demo
Enter the content in here...