Mil*_*fie 109
我只是偶然发现了这个旧帖子,虽然我确定user01早已找到他的答案,但我发现当前的答案并不常用.在使用其他人提供的信息玩了一下之后,我发现了一个适用于IE,Firefox和Chrome的解决方案.在CSS中:
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
display: table-cell;
vertical-align: middle;
}
这几乎与abernier的答案完全相同,但我发现包括宽度会破坏居中,因为省略了自动边距.我希望其他任何偶然发现这个帖子的人会发现我的答案很有帮助.
注意:省略html, body { height: 100%; }只能水平居中.
- @JackHumphries只有在垂直轴和水平轴上对齐页面中心时才需要高度.如果您想要水平,则可以省略高度. (7认同)
arn*_*aki 29
你可以试试:
body{ margin:0 auto; }
- 虽然它很短，但也不适用于 IE、Edge Legacy、Edge、Chrome 或 Firefox。问题是，margin auto 仅在元素宽度小于父元素宽度时才起作用。由于“正文”默认为 100%，边缘上没有空间可以自动插入边距。您可以使用`body { margin:0 auto; 最大宽度：700px；}` 然后你的身体将达到 700 像素，并允许在较小的设备上环绕。 (4认同)
abe*_*ier 15
body {
display:flex; flex-direction:column; justify-content:center;
min-height:100vh;
}
Ger*_*ica 10
如果我有一件我喜欢与CSS分享的东西,那就是我在两个方向上的中心方式!
这种方法的优点:
- 与人们实际使用的浏览器完全兼容
- 不需要桌子
- 高度可重复使用,可以将其父元素中的任何其他元素居中
- 为父母和孩子提供动态(不断变化)的尺寸!
我总是通过使用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>
对中心的想法现在是制作.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;
}
这为您提供了两个真正可重复使用的类,用于将任何父级内的任何子项集中在一起!只需添加.centered-wrapper和.centered-content类.
那么,该:before元素有什么用呢？它是便利的vertical-align: middle;,也是必要的,因为垂直对齐与父母的高度无关 - 垂直对齐是相对于最高兄弟的高度!.因此,通过确保有一个兄弟,其高度是父母的高度(100%高度,0宽度使其不可见),我们知道垂直对齐将相对于父母的高度.
最后一件事:您需要确保您html和body标签的大小与窗口的大小相同,因此以它们为中心与浏览器的中心相同!
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
小提琴:https://jsfiddle.net/gershy/g121g72a/
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;
}
写就好了
<body>
<center>
*Your Code Here*
</center></body>
- 最容易和最简单的方法来做到这一点。 (2认同)
- 中心标签已弃用：/sf/ask/125917221/ (2认同)
我使用flexbox html.为了获得良好的效果,您可以匹配浏览器镶边,以便在大于页面最大值的屏幕尺寸上构建内容.我觉得#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);
}
图像/数据由StatCounter提供
- 好,现代的答案.只是几条评论.(a)`box-shadow`的vendor-prefix可能是多余的,因为支持`flex`的浏览器也支持`box-shadow`.(b)有很多CSS可以修饰你的答案,但却很难区分出重要的部分.谢谢 (4认同)