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 , Sr Ui/Ux and Javascript Developer , Arpatech

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

Do you need help in adding the right keywords to your CV? Let our CV writing experts help you.