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
Do you need help in adding the right keywords to your CV? Let our CV writing experts help you.