Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

Position a div at the center of the page

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.

 

user-image
Question added by Mohammed Shaji Vattam Kandathil , Senior Developer , Emirates Arabian Horse Society
Date Posted: 2015/03/26
Faizan Ahmed
by Faizan Ahmed , Lead UI Engineer , Folio3

give the width to div and then give margin left and right 'auto'.

 

div{ width:400px; margin:0 auto; }

Yasir Hussain
by Yasir Hussain , Digitizing Consultant , PROZTEC

give a margin0 and auto to that element it will be at the center

vishal sharaf
by vishal sharaf , DBA & Tech Support , India IT Solution

div{

position:absolute;

left:30%;

top:30%;

width:100px;

height:100px;

}

and adjust this with your customization.

Sathishkumar N
by Sathishkumar N , Web Developer , Admax communications

to position a element at the center of the screen

Just specify the element with the following css code

margin:auto

ramakrishna ramachadra
by ramakrishna ramachadra , Technical Web Analyst , Happy Marketer

<!-- 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>

Asteway Shitaye Woldehitsan
by Asteway Shitaye Woldehitsan , Mobile Application Engineer , golfscape

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