3

I made a CSS template
And I want to make it in the center of the page when I open the browser it appears on the left of the page any help please

Gopi
  • 10,073
  • 4
  • 31
  • 45
john
  • 434
  • 1
  • 9
  • 24

5 Answers5

12

You need to use margin:auto with specified width like this:

#wrapper{
  margin:auto;
  width:1000px;  /* adjust width */
}

Where #wrapper is supposed to be the main container element on your page.

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
  • 1
    there's a common gotcha with this, making your centered div jump a few pixels to the left between pages depending on whether scrollbars are active or not. a common solution is given here http://stackoverflow.com/questions/1202425/html-css-making-the-main-scrollbar-always-visible/1202542#1202542 – second Sep 02 '10 at 13:19
  • It's worth noting that this will affect the top and bottom margins of `#wrapper` as well. – Armand Sep 03 '10 at 08:52
2

To get this centered properly, the wrapper needs to have a set width and we need to set the left and right margins to auto.

#wrapper {
width: 960px; /* set to width of content */
margin: 0 auto;
}

Sarfraz was on the right page, but there is no reason to set the top and bottom margins to auto. We should only affect the properties that are necessary to get the result we want.

Brian Ray
  • 1,482
  • 3
  • 20
  • 20
0

user

body{
  margin:0 auto;
}
or top root parent id

#parentid{
margin:0 auto;
}
Pramendra Gupta
  • 14,667
  • 4
  • 33
  • 34
  • The body tag defaults to 100% width. Therefore, setting the left and right margins to auto will have no effect whatsoever. – Brian Ray Sep 02 '10 at 13:47
0

My method is slightly different to those already here so here's my suggestion.

div#wrapper {
    width: 960px;
    position: absolute;
    left: 50%;
    margin-left: -480px;
}

Where #wrapper is a div containing the main content of your site.

margin-left should equal whatever half of your width is.

diggersworld
  • 12,770
  • 24
  • 84
  • 119
  • Is there any advantage to this solution over `margin-left:auto; margin-right: auto;`? – Armand Sep 02 '10 at 14:07
  • This is a good solution for centering something vertically, but it seems kind of unnecessary to take the entire wrapper out of the standard flow by positioning it absolutely. Also, there are much simpler solutions that aren't hacks. – Brian Ray Sep 02 '10 at 14:21
  • RE: Brian - If you didn't want to take it out of the flow, you could use position: relative; Then anything that followed the div would appear where it should. It's already quite simple, so I wouldn't define it as a hack. RE: Alison - I don't think there is an advantage / disadvantage in using either. This is just the way I've always done it, and it always worked for me. – diggersworld Sep 02 '10 at 14:42
  • @diggersworld at the risk of sounding rude, this solution doesn't seem elegant to me – Armand Sep 03 '10 at 08:54
  • @diggersworld, this is unnecessary all the way around. Why would I do all of this when I could do it with 2 styles, width and margin? – Brian Ray Sep 03 '10 at 12:21
  • @Brian, you don't have to do it this way, it was just an alternate suggestion. Semantically he wants to position his wrapper in the centre of the page, so I use the position attribute to highlight that. Margin is part of the box model. Technically they work in a different way, visually they work the same. Like I said it's just an alternative. – diggersworld Sep 07 '10 at 09:27
0

Specify left and right margins as auto and set a width for the body:

body {
    margin-left: auto;
    margin-right: auto;
    width: 780px;
}

I chose 780px for the width, but you could put whatever you want. Specifying in other units (e.g. em, %) should work too.

Armand
  • 23,463
  • 20
  • 90
  • 119