HTML Vertical Align

Question

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;
}

score 2 · Answer 1 · answered Apr 27 '12 at 04:47

2

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

answered Apr 27 '12 at 04:47

Karl Keefer

645
1
5
13

Looks like left:50% didn't take. The parent element that you want to center it inside of needs to have a position:relative declared, but if you're just centering relative to 'body' you don't need to do that. If you post it somewhere where I can see the code I can probably tell you what's up. http://jsfiddle.net/ – Karl Keefer Apr 28 '12 at 02:36

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

Hey Please use easy way

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

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

edited May 23 '17 at 12:12

Community

1
1

answered Apr 27 '12 at 05:14

ShibinRagh

6,530
4
35
57

Hey. What do the - 200 represent I have a box 600px wide and its off center – Jess McKenzie Apr 27 '12 at 05:32
I have edited your code please check, http://jsfiddle.net/e2bmC/1/ please copy the code and paste on your dreamwear and check it – ShibinRagh Apr 27 '12 at 07:00
Hey,I am a bit confused about what I should be setting here http://cl.ly/1A2X0A1f2z351w3w3j3g gets me http://cl.ly/0k0y3I372x2A3l1E0K3q – Jess McKenzie Apr 27 '12 at 07:13
It was a easy and useful code in more situations , please set border after you can identify how is working – ShibinRagh Apr 27 '12 at 07:26

HTML Vertical Align

2 Answers2