Motyar

Creating value through Programming

FREE VPS for 2 months
DigitalOcean
Cloud hosting for developers
20GB SSD, 512MB RAM - only $5 per month

Jul 7, 2010

Centering element in liquid layout - CSS tip

How to center an element on a page using CSS? There are many methods, i have tried some of them but no one working according me. I am sharing one of them that working well for me.

Idea

The trick behind this is really very interesting, Its about positioning element absolute and setting top, left and margin according to the size of element.

Set top and left to 50% (to center) and margin in negative and half of the height and width

Code

CSS


#icard {
    
positionabsolute;

   
//set width and height
    
width200px;
    
height400px;

   
//set top and left 50%
  
  top50%;
    
left50%;

    //set margin negative, and half of width and height
 
   margin: -100px 0 0 -200px;
}

Demo

You can visit my SMSME page to see the working demo.

Labels: , ,


By :