CSS - center everything within the body tag

Question

I am trying to center everything within the tag on the page without adding another container within it. My situation doesn't allow me to change the markup that is being generated but I am able to edit the CSS. My overall objective is to create css that allows me to use the zoom tag in IE for the print css (to zoom out), but the way it is currently working, this creates a lot of white space on the right side and I'd like to make sure the content is always centered in the middle.

http://stackoverflow.com/questions/6464592/how-to-align-entire-html-body-to-the-center — Ciro Santilli新疆棉花TRUMP BAN BAD, Jun 07 '16 at 19:47

score 22 · Answer 1 · answered Jun 23 '10 at 16:23

22

If you're ok with giving the body a fixed width, you can center it by giving it a width and a margin of auto for the left and right margins:

E.g:

body { width: 960px; margin: 0 auto; }

answered Jun 23 '10 at 16:23

jimr

10,682
1
29
31

Dr. Frankenstein · Answer 2 · 2010-06-23T17:09:36.567

1

If you want something like this - http://jsbin.com/emomi3/5/ ...

  body {
    position: relative;
    width: 100%;
    border: 1px solid red;
    display: block;
  }

  body > *  {
    margin: auto;
    width: 500px;
    border: 1px solid blue;
    display: block;
    overflow: auto;
  }

  body > script {
    display: none
  }

(The borders are just in for illustration purposes)

edited Jun 23 '10 at 17:09

answered Jun 23 '10 at 16:26

Dr. Frankenstein

4,394
7
30
48

Why "position: relative;"? – Kebman Jan 21 '13 at 21:33

score 0 · Answer 3 · answered Feb 20 '13 at 13:21

0

if you use primefaces ... , I recommend to you to add !important like this :

body { 
    width: 1280px;
    height: 1024px;
    margin: 0 auto !important;
}

answered Feb 20 '13 at 13:21

Karim Oukara

2,508
8
36
49

CSS - center everything within the body tag

3 Answers3