Question

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

当事情变得如此简单时，为什么CSS不会与margin:auto 0px;一起使用，而是将固定高度的容器置于随机高度的容器内？有没有具体的理由这样做？感谢您提前获得的见解。

Answer 1

这真的不是你想象的噩梦，只是不要使用边距。 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/

Answer 2

您的问题的正确答案是，margin: auto 0的工作方式与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;
}

Answer 3

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>

请注意----------- 这个css类几乎适用于所有浏览器

为什么自动保持边距的属性在水平工作时不能垂直工作？

3 个答案: