Html 为什么边距的自动属性在水平工作时不能垂直工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8620200/
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
Why does auto attribute for margin not work vertically while it works horizontally?
提问by ikartik90
I have seen that while developing websites, vertically centering a container (of fixed height) inside a container of random height always comes as a nightmare for the web developer (at least, me) while when it comes to horizontal centering a container (of fixed width) inside a container of random width, the margin:0px auto;tends to serve an easy way out in the standard model.
When things can be as simple as that why doesn't CSS work out with the margin:auto 0px;when it comes to centering a container of fixed height inside a container of random height? Is there any specific reason to do so? Thanks for your insights in advance.
我已经看到，在开发网站时，在随机高度的容器内垂直居中一个容器（固定高度）总是对 web 开发人员（至少，我）来说是一场噩梦，而当涉及到水平居中容器（固定高度）时宽度）在随机宽度的容器内margin:0px auto;，在标准模型中往往是一种简单的方法。
当事情可以这么简单时，为什么 CSS 不能解决margin:auto 0px;将固定高度的容器居中放置在随机高度的容器中的问题？有什么特别的理由这样做吗？感谢您提前提供见解。
采纳答案by Wex
It's really less of a nightmare than you think, just don't use margins. vertical-alignis really what you should rely on for fluid-height vertical centering. I threw together a quick demo to demonstrate my point:
这真的不像你想象的那么噩梦，只是不要使用边距。vertical-align确实是您应该依赖的流体高度垂直居中。我拼凑了一个快速演示来证明我的观点：
HTML:
HTML：
<span></span><div id="any-height"></div>
CSS:
CSS：
* { margin: 0; padding: 0; }
html, body {
height: 100%;
text-align: center; }
span {
height: 100%;
vertical-align: middle;
display: inline-block; }
#any-height {
background: #000;
text-align: left;
width: 200px;
height: 200px;
vertical-align: middle;
display: inline-block; }
回答by user1602599
The right answer for your question is that margin: auto 0doesn't work the same way that margin: 0 autoworks because width: autodoesn't work the same way height: autodoes.
您的问题的正确答案是，margin: auto 0工作方式不同，margin: 0 auto因为width: auto工作方式不同height: auto。
Vertical auto margin works for absolutely positioned elements with a known height.
垂直自动边距适用于具有已知高度的绝对定位元素。
.parent {
position: relative;
}
.child {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 150px;
height: 150px;
margin: auto;
}
回答by Mok
css ----------------
css ----------------
.aligncenter{
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
flex-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
flex-pack: center;
}
html -------------------------
html -------------------------
<div class="aligncenter">
<div class="aligncenter">
---your content appear at the middle of the parent div----
---your content appear at the middle of the parent div----
</div>
</div>
note----------- this css class work with almost all browsers
注意----------- 这个 css 类几乎适用于所有浏览器
