CODEWITHSUNDEEP
htmlcsscross-browservertical-alignment
Jess McKenzie
Jess McKenzie

Reputation: 8385

HTML Vertical Align

What is the quickest way for me to get a div vertically centered - Cross browser?

HTML:

<body>
    <div id="mainContainer">
        <header>
            blah
            </header><!-- End header -->
        </div><!-- End mainContainer -->

</body>

CSS:

#mainContainer{
    width:960px;
    margin:60px auto;
    background:#FFF;
    border:1px solid black;
}
header{
    padding:30px 0 30px 0;
    background:red;
    margin:0 auto;
}

Upvotes: 1

Views: 221

Answers (2)

ShibinRagh
ShibinRagh

Reputation: 6646

Hey Please use easy way

https://stackoverflow.com/a/10010055/1312610

http://jsfiddle.net/ERuX4/1/

Upvotes: 1

Karl Keefer
Karl Keefer

Reputation: 645

If you can specify a height, then you can use

position:absolute
top:50%;
left:50%;
width:200px;
height:200px;
margin-left:-100px;
margin-top:-100px;

where the negative margins are half of the width and height respectively

Upvotes: 2

Related Questions