Best IT Recipes

How to align the entire html body to the center?

How to align the entire html object with the center?

+81
html css
Jun 24 '11 at 7:13
source share
6 answers

I just stumbled upon this old post, and although I'm sure user01 already found his answer, I found that the current answers do not quite work. After playing a little, using the information provided by 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 turning on the width would cause centering to break, as well as automatic margin. I hope that anyone who stumbles upon this topic will find my answer useful.

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

+108
Feb 08 '13 at 15:42
source share

You can try:

 body{ margin:0 auto; }
+29
Mar 20 '15 at 12:01
source share
 html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle;}
+15
Jun 24 2018-11-11T00:
source share

If I have one thing that I like to share with CSS, it is MY FAVORITE WAY OF CENTRAL USE IN CURRENT-BASED BOTH FACES !!!

Advantages of this method :

  • Fully compatible with browsers that people actually use
  • No need for tables
  • Very reusable to center any other elements within their parent
  • Placement of parents and children with dynamic (variable) sizes!

I always do this using 2 classes: one to indicate the parent element whose contents will be centered ( .centered-wrapper ), and the second to indicate which child element of the parent is centered ( .centered-content ). This 2nd class is useful when the parent has several children, but only 1 needs to be centered). In this case, the body will be .centered-wrapper , and the inner div will be .centered-content .

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

The idea of ​​centering now is to make .centered-content an inline-block . This will make it easy to facilitate horizontal centering, text-align: center; , and also allows vertical centering, as you will 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 to center any child inside any parent! Just add .centered-wrapper and .centered-content classes.

So what's with this element :before ? This facilitates vertical-align: middle; and necessary, because vertical alignment does not apply to the height of the parent - vertical alignment relative to the height of the highest brother !!!. Therefore, ensuring that there is a brother whose height is the parent height (height 100%, width 0 to make it invisible), we know that vertical alignment will refer to the parent height.

Last: you have to make sure your html and body tags are the size of the window, so centering on them is the same as centering the browser!

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

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

+10
Jan 27 '16 at 20:07
source share

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; }
+8
Jun 24 '11 at 7:20
source share
 <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 the width to suit your needs.

+3
Sep 22 '17 at 11:14
source share


More articles:


All Articles