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 {
    position: absolute;
    //set width and height
    width: 200px;
    height: 400px;
    //set top and left 50%
    top: 50%;
    left: 50%;
    //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: css, Sms, Tip

By : Motyar+ @motyar