Position header div in the centre of the screen at the top

Question

Could anyone tell me how i would get this div to be centred at the top of the screen, with equal distances from the bounds of the page on both the left and the right.

position:relative;
width:800px;
height:70px;
background-color:#0CF;
left: 15%;

Thanks!

A quick search finds this question a million times. possible duplicate of [How to align a
to the middle of the page](http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page) — James Montagne, May 15 '13 at 15:50

score 2 · Answer 1 · answered May 15 '13 at 15:49

2

By specifying automatic margins for left and right edges:

margin:0 auto;

This forces the browser to equalize them within the parent, which has full browser width, so it's centered since you have explicitly set the width.

Sample implementation.

answered May 15 '13 at 15:49

Niels Keurentjes

41,402
9
98
136

All browsers since and including IE6, so doesn't really matter. – Niels Keurentjes May 15 '13 at 15:59
Ah i see, yes considering ie6 has been dead for some time I shouldn't worry too much about it xD. Thanks! – Callum May 15 '13 at 16:00

MasNotsram · Answer 2 · 2013-05-15T16:14:25.813

0

Well it depends on the parent element, and why you have it as position:relative;, but generally to center a block level element with a set width, within it's parent, you can just use:

margin:0 auto

edited May 15 '13 at 16:14

answered May 15 '13 at 15:50

MasNotsram

2,105
18
28

1

The number `0` has no dimensions at all, so no need to specify whether it's pixels, bananas or airplanes. Common practice is to just `0` in CSS :) – Niels Keurentjes May 15 '13 at 16:10
Good point, force of habit with typing, would save a couple of KB, will remove. – MasNotsram May 15 '13 at 16:14

score 0 · Answer 3 · answered May 15 '13 at 15:51

0

Since you have a width set, you should use

margin:0 auto;

answered May 15 '13 at 15:51

lazyprogrammer

633
9
26

score 0 · Answer 4 · answered May 15 '13 at 15:53

0

You should try this jsfiddle :

HTML :

<div>This is some DIV</div>

CSS :

div {
    width : 50%;
    margin : auto;
    border : 1px solid black; // To see that it is centered
}

answered May 15 '13 at 15:53

Xaltar

1,688
14
22

score 0 · Answer 5 · answered May 15 '13 at 15:53

Usually when doing this you want to do something like below. It will stay withing the bounds of it's parent element and wherever you put it on the page but will place it in the middle.

If you want to put it in the code: style=" margin-left:auto; margin-right:auto;"

Otherwise just add that to your css for the div.

using this method will not set your upper and lower margin to auto.

score 0 · Answer 6 · answered May 15 '13 at 15:55

0

use margin: 0 auto;

0 - stands for 0px top and bottom sides of the page auto - means it'll adjust itself according to the available window size and can make it center.

answered May 15 '13 at 15:55

Mohan Kumar

1
1

Position header div in the centre of the screen at the top

6 Answers6