为什么边界的自动属性不能垂直工作，而是水平工作？

我已经看到，在开发网站的同时，将一个容器（固定高度）垂直居中放置在一个随机高度的容器内，对于Web开发人员（至少是我）来说总是一场噩梦，而当涉及到一个容器（固定的宽度）在一个随机宽度的容器内， margin:0px auto; 倾向于在标准模型中提供简单的方法。

当事情可以像这样简单时，为什么不用CSS来处理margin:auto 0px; 当涉及到在一个随机高度的容器内对齐一个固定高度的容器时？ 有没有特别的理由这样做？ 提前感谢您的见解。

---

这实际上比你想象的更噩梦，只是不使用利润率。 vertical-align实际上是你应该依赖的流体高度垂直居中。 我汇集了一个快速演示来展示我的观点：

HTML：

<span></span><div id="any-height"></div>

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; }

请参阅：http://jsfiddle.net/Wexcode/jLXMS/

---

你的问题的正确答案是： margin: auto 0不会像margin: 0 auto一样工作margin: 0 auto工作，因为width: auto不会以同样的方式工作height: auto 。

垂直自动边距对已知高度的绝对定位元素起作用。

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 150px;
    height: 150px;
    margin: auto;
}

---

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 -------------------------

<div class="aligncenter">

---your content appear at the middle of the parent div----

</div>

note -----------这个css类几乎适用于所有的浏览器

链接地址: http://www.djcxy.com/p/41465.html

上一篇: Why does auto attribute for margin not work vertically while it works horizontally?

下一篇: Checkbox alignment in Internet Explorer, Firefox and Chrome