Easiest way to centering a div using pure CSS
The trick to center the div is to shift the outer and inner div, with the use of position:relative and display:block. Shift the outer block 50% left relative, and then next is to move the inner block back to -50% left. Hope this make sense. This code will work on all browser.
html
<body class="ds">
<div class="wrapper">
<div class="outer">
<div class="inner">Centering the DIV</div>
</div>
</div>
</body>
css
.ds {
margin:0;
padding:0;
}
div.wrapper{
float: left;
overflow: hidden;
position: relative;
width: 100%;
background:#00F;
padding:10px;
margin:0 -20px;
}
div.outer{
clear: left;
float: left;
left: 50%;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
div.inner{
display: block;
float: left;
margin: 0;
padding: 0;
position: relative;
right: 50%;
color:#FFF;
padding:5px 20px;
background:#900;
border:1px dotted #cccccc;
}
I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.
Good Luck!
