Register now or log in to join your professional community.
I want to position a <div> element at the center of the screen irrespective of screen size. The space left on 'right' and 'left' sides should be equal. I would like to accomplish this with only CSS.
give the width to div and then give margin left and right 'auto'.
div{ width:400px; margin:0 auto; }
give a margin0 and auto to that element it will be at the center
div{
position:absolute;
left:30%;
top:30%;
width:100px;
height:100px;
}
and adjust this with your customization.
to position a element at the center of the screen
Just specify the element with the following css code
margin:auto
<!-- way1 --!>
<style type="text/css">
#mydiv {
position:absolute;
top:50%;
left:50%;
margin:0 auto;
}
</style>
<!-- way2 --!>
<style type="text/css">
#mydiv
{
width:100px;
margin:0 auto;
clear:both;
}
</style>
to align a div center, the width of the child div and the parent div should be defined. for example:
========the css=====
.parent{
text-align:center;
width:100%;
}
.child{
width:50%;
text-align:left;
margin:Auto;
}
Text-align is used so the centering can also work on IE6 as IE6 doesn't support margin Auto
