How to align entire html body to the center?

Question

How do I align entire html body to the center ?

Horizontal, vertical or both? – Ciro Santilli OurBigBook.com Jun 07 '16 at 19:47 — Ciro Santilli OurBigBook.com, Jun 07 '16 at 19:47
does w3 have any easy ways to do it – Hello Jan 06 '21 at 20:28 — Hello, Jan 06 '21 at 20:28

MildWolfie · Answer 1 · 2016-06-06T12:45:08.333

156

I just stumbled on this old post, and while I'm sure user01 has long since found his answer, I found the current answers don't quite work. After playing around for a little bit using info provided by the others, I found a solution that worked in IE, Firefox, and Chrome. In CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

This is almost identical to abernier's answer, but I found that including width would break the centering, as would omitting the auto margin. I hope anyone else who stumbles on this thread will find my answer helpful.

Note: Omit html, body { height: 100%; } to only center horizontally.

edited Jun 06 '16 at 12:45

answered Feb 08 '13 at 15:42

MildWolfie

2,492
1
16
27

1

Good answer. Just wondering (as I don't have a lot of experience with HTML), is setting the height to 100% necessary? – Jack Humphries Aug 22 '13 at 20:43
8

@JackHumphries The height is only necessary if you want to align the page center on both the vertical and horizontal axis. If horizontal is all you want, you can omit the height. – MildWolfie Aug 27 '13 at 14:42
@Jack Humphries its not because it happens it self – Hello Jan 06 '21 at 20:30

score 60 · Answer 2 · edited Jun 26 '15 at 13:34

60

You can try:

body{ margin:0 auto; }

edited Jun 26 '15 at 13:34

António Almeida

9,620
8
59
66

answered Mar 20 '15 at 12:01

arniotaki

2,175
2
23
26

1

This is such a simple answer yet the cleanest and most efficient way of centring the body tag in the middle of the page. – justinhartman Oct 30 '18 at 20:10
6

While it's short is also does not work in IE, Edge Legacy, Edge, Chrome, nor Firefox. The problem is that margin auto only works when the element width is less than that of the parent. As 'body' defaults to 100% there no room on the edges to auto-insert margins. You can use `body { margin:0 auto; max-width: 700px; }` and then your body will be up to 700px and will allow wrapping on smaller devices. – user3347790 Jun 11 '20 at 20:15

abernier · Answer 3 · 2022-12-07T00:37:47.537

32

EDIT

As of today with flexbox, you could:

body {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}

☝BEST

Compared to this other flexbox auto-margins technique:

body {
  display:flex;
  min-height:100vh;
}
body >div {margin:auto;}

the first-one, does not require you to wrap everything into a div!

PREVIOUS ANSWER

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}

edited Dec 07 '22 at 00:37

answered Jun 24 '11 at 07:31

abernier

27,030
20
83
114

1

Which DOCTYPE allows the `style` attribute of the `html` entity? – ceving Sep 30 '14 at 08:16
1

@ceving: not sure to understand... mean it is not CSS valid ? – abernier May 09 '16 at 19:21
Solutions 1 (flex + justify-content) and 3 only align vertically to the center, content is still aligned to the right. Solution 2 (flex, margin: auto) works but it makes the scrollbar appear as if content was sightly higher than the page allows. Setting min-height to a slightly lower value like 95vh works (but may induce some unwanted offset). – hsandt May 29 '23 at 23:33

score 24 · Answer 4 · answered Jul 07 '20 at 11:57

24

Try this

body {
max-width: max-content;
margin: auto;
}

answered Jul 07 '20 at 11:57

Riccardo Zonta

247
2
4

I think this is the best way to do it – Arwildo Nov 22 '20 at 02:28

Gershom Maes · Answer 5 · 2016-01-27T20:43:49.520

If I have one thing that I love to share with respect to CSS, it's MY FAVE WAY OF CENTERING THINGS ALONG BOTH AXES!!!

Advantages of this method:

Full compatibility with browsers that people actually use
No tables required
Highly reusable for centering any other elements inside their parent
Accomodates parents and children with dynamic (changing) dimensions!

I always do this by using 2 classes: One to specify the parent element, whose content will be centered (.centered-wrapper), and the 2nd one to specify which child of the parent is centered (.centered-content). This 2nd class is useful in the case where the parent has multiple children, but only 1 needs to be centered). In this case, body will be the .centered-wrapper, and an inner div will be .centered-content.

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

The idea for centering will now be to make .centered-content an inline-block. This will easily facilitate horizontal centering, through text-align: center;, and also allows for vertical centering as you shall see.

.centered-wrapper {
    position: relative;
    text-align: center;
}
.centered-wrapper:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
.centered-content {
    display: inline-block;
    vertical-align: middle;
}

This gives you 2 really reusable classes for centering any child inside of any parent! Just add the .centered-wrapper and .centered-content classes.

So, what's up with that :before element? It facilitates vertical-align: middle; and is necessary because vertical alignment isn't relative to the height of the parent - vertical alignment is relative to the height of the tallest sibling!!!. Therefore, by ensuring that there is a sibling whose height is the parent's height (100% height, 0 width to make it invisible), we know that vertical alignment will be with respect to the parent's height.

One last thing: You need to ensure that your html and body tags are the size of the window so that centering to them is the same as centering to the browser!

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

Fiddle: https://jsfiddle.net/gershy/g121g72a/

Ronnie Royston · Answer 6 · 2018-02-05T01:00:07.617

11

I use flexbox on html. For a nice effect, you can match the browsers chrome so as to frame your content on screen sizes larger than your page maximums. I find that #eeeeee matches pretty well. You could add a box shadow for a nice float effect.

    html{
        display: flex;
        flex-flow: row nowrap;  
        justify-content: center;
        align-content: center;
        align-items: center;
        height:100%;
        margin: 0;
        padding: 0;
        background:#eeeeee;
    }
    body {
        margin: 0;
        flex: 0 1 auto;
        align-self: auto;
        /*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
        width: 100%
        max-width: 900px;
        height: 100%;
        max-height: 600px;
        background:#fafafa;
        -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    }

image/data courtesy StatCounter

edited Feb 05 '18 at 01:00

answered Feb 04 '18 at 23:13

Ronnie Royston

16,778
6
77
91

4

Good, modern answer. Just a few comments. (a) The vendor-prefix for `box-shadow` is probably redundant as browsers which support `flex` also support `box-shadow`. (b) There’s a lot of CSS which embellishes your answer, but makes the important bits hard to distinguish. Thanks – Manngo Mar 06 '18 at 01:05
Very much (b), in @Manngo's comment above. – cjauvin Jul 26 '18 at 18:54
Good answer. Modern. But it could have been a simpler one with the same content. – carloswm85 Oct 05 '19 at 04:18

score 9 · Answer 7 · answered Nov 27 '19 at 21:03

9

Just write

<body>
   <center>
            *Your Code Here*
   </center></body>

answered Nov 27 '19 at 21:03

eqrakhattak

535
2
7
21

3

Most easy and simple way to do it. – shaeed Jan 01 '20 at 06:24
2

The center tag is deprecated: https://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html – kyczawon May 11 '20 at 12:50
This was used in HTML4 – france1 Sep 08 '22 at 09:43

score 8 · Answer 8 · edited Nov 01 '16 at 17:23

8

http://bluerobot.com/web/css/center1.html

body {
    margin:50px 0; 
    padding:0;
    text-align:center;
}

#Content {
    width:500px;
    margin:0 auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

edited Nov 01 '16 at 17:23

Kerem Baydoğan

10,475
1
43
50

answered Jun 24 '11 at 07:20

jantimon

36,840
23
122
185

1

what is the purpose of `0px` at the end, rather than `auto`? – Don Cheadle Feb 17 '15 at 17:05

score 4 · Answer 9 · answered Sep 22 '17 at 11:14

4

<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

Just apply this style before applying any CSS. You can change width as per your need.

answered Sep 22 '17 at 11:14

CodeDreamerSLS

41
1

luffysman · Answer 10 · 2021-06-29T09:54:59.107

3

What about this:

if width: 60%, then margin-left: (1-60%)/2 = 20%;
if height: 50%, then margin-top: (1-50%)/2=25%;

So do margin-bottom and margin-right;

<style type="text/css">
        html {
            height: 100%;
        }

        body {
            width: 60%;
            height: 50%;
            margin: 25% 20% 25% 20%;
            border: 1px solid;
        }
    </style>

edited Jun 29 '21 at 09:54

answered Jun 29 '21 at 03:20

luffysman

31
3

score -3 · Answer 11 · edited Nov 20 '21 at 17:00

-3

<body class="center">
    <div align="center">
    </div>
</body>

This is the code that worked for me, using glitch.me.

edited Nov 20 '21 at 17:00

Dharman

30,962
25
85
135

answered Nov 20 '21 at 16:55

Adam Murray

1
1

Where are the classes coming from? – user37309 Nov 25 '21 at 02:28

How to align entire html body to the center?

11 Answers11

Linked

Related