如何将整个 html body 对齐到中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6464592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align entire html body to the center?
提问by Rajat Gupta
How do I align entire html body to the center ?
如何将整个 html body 与中心对齐？
回答by MildWolfie
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:
我只是偶然发现了这篇旧帖子，虽然我确信 user01 早就找到了他的答案，但我发现目前的答案并不完全有效。在使用其他人提供的信息玩了一会儿之后，我找到了一个适用于 IE、Firefox 和 Chrome 的解决方案。在 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.
这几乎与 abernier 的答案相同，但我发现包括宽度会破坏居中，就像省略自动边距一样。我希望任何偶然发现这个线程的人都会发现我的回答有帮助。
Note:Omit html, body { height: 100%; }to only center horizontally.
注意：省略html, body { height: 100%; }仅水平居中。
回答by arniotaki
You can try:
你可以试试：
body{ margin:0 auto; }
回答by abernier
EDIT
编辑
As of today with flexbox, you could
从今天开始使用 flexbox，你可以
body {
display:flex; flex-direction:column; justify-content:center;
min-height:100vh;
}
PREVIOUS ANSWER
以前的回答
html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}
回答by Gershom
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!!!
如果我有一件我喜欢分享的关于 CSS 的事情，那就是我最喜欢的将东西放在两个轴上的方式！！！
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, bodywill be the .centered-wrapper, and an inner divwill be .centered-content.
我总是通过使用 2 个类来做到这一点：一个用于指定父元素，其内容将居中 ( .centered-wrapper)，第二个用于指定父元素的哪个子元素居中 ( .centered-content)。在父级有多个子级但只有 1 个需要居中的情况下，第二个类很有用）。在这种情况下，body将是.centered-wrapper，而内部div将是.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-contentan inline-block. This will easilyfacilitate horizontal centering, through text-align: center;, and also allows for vertical centering as you shall see.
居中的想法现在是制作.centered-content一个inline-block. 这将很容易促进水平居中，通过text-align: center;，并且还允许垂直居中，如您所见。
.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-wrapperand .centered-contentclasses.
这为您提供了 2 个真正可重用的类，用于将任何孩子置于任何父母的中心！只需添加.centered-wrapper和.centered-content类。
So, what's up with that :beforeelement? 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.
那么，这个:before元素是怎么回事？它有助于vertical-align: middle;并且是必要的，因为垂直对齐不是相对于父级的高度 -垂直对齐是相对于最高兄弟姐妹的高度！！！. 因此，通过确保存在高度为父级高度的兄弟（100% 高度，0 宽度使其不可见），我们知道垂直对齐将相对于父级的高度。
One last thing: You need to ensure that your htmland bodytags are the size of the window so that centering to them is the same as centering to the browser!
最后一件事：您需要确保您的html和body标签是窗口的大小，以便以它们为中心与以浏览器为中心相同！
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
回答by jantimon
http://bluerobot.com/web/css/center1.html
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;
}
回答by Ronnie Royston
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 #eeeeeematches pretty well. You could add a box shadow for a nice float effect.
我在html. 为了获得不错的效果，您可以匹配浏览器的 chrome，以便在大于页面最大值的屏幕尺寸上对内容进行框架化。我觉得#eeeeee匹配得很好。您可以添加一个框阴影以获得漂亮的浮动效果。
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
图片/数据由StatCounter 提供
回答by icyNerd
Just write
写就好了
<body>
<center>
*Your Code Here*
</center></body>
回答by CodeDreamerSLS
<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.
只需在应用任何 CSS 之前应用此样式。您可以根据需要更改宽度。
