CSS margin-top 值不正确[重复]答案

【问题标题】：CSS margin-top is incorrect value [duplicate]CSS margin-top 值不正确[重复]
【发布时间】：2016-01-06 12:37:50
【问题描述】：

我有非常简单的标记和样式规则，应该将我的div 放在页面中间，但它没有（实际上，div 的顶部会在中间，而不是 100% 真正垂直居中）当视口的高度足够小时。

HTML：

<div>adf</div>

CSS：

div {
    background-color:red;
    margin-top:50%;
}

您可以查看我的Fiddle 来查看此内容。它需要你稍微缩小渲染的窗口（右下角），因为它最初是正确的。

【问题讨论】：

margin-top 在使用百分比时使用元素的宽度。查看这个问题的答案：stackoverflow.com/questions/7266363/…
参见the spec：百分比是根据生成框的包含块的宽度计算的。请注意，“margin-top”和“margin-bottom”也是如此。

标签： html css

【解决方案1】：

代替50% 试试50vh

50% 并没有按照你的想法做——它实际上使用父容器的width，而不是height 来计算。

【讨论】：

请记住，并非所有浏览器都支持 vh 单元。 caniuse.com/#feat=viewport-units
我记得读过这个……这很烦人。
好点粉丝最爱 - 这在 IE8 中根本不起作用。
@fanfavorite 谢谢。支持对我来说已经足够了；只是个人项目。

【解决方案2】：

尝试用vh替换百分比

div {
    background-color:red;
    margin-top:50vh;
}

&lt;div&gt;adf&lt;/div&gt;

Here 是关于视口大小测量的更酷的东西

【讨论】：

你的回答基本上是威勒的重复。
好吧，当我将代码复制到 sn-p 时，我没有看到发布的答案。所以看来你对我投了反对票。谢谢！
我知道，但是你说我必须删除我自己的答案，这是正确和有帮助的，因为有人在我之前半分钟发布了答案？！
这与个人无关。它只是让未来的读者很难以一种好的方式找到完整的答案。 willoller 的回答应该根据您的信息进行编辑和改进。它一直在发生。
当我被抢到时我会删除我的答案，但我不会因为太晚而对答案投反对票。不过，根据 mods 的说法，downvotes 是正确的行为，因为它们鼓励用户删除并获得一些代表（meta.stackoverflow.com/questions/255571/… 和 meta.stackoverflow.com/questions/263046/…）

【解决方案3】：

这是另一个解决方案： http://jsfiddle.net/nb6pq14v/

html, body{height:100%; margin:0;padding:0}
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
 

.centering {
  float:none;
  margin:0 auto;
    background: #abc;
    height: 25px; 
}

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           
        </div>
    </div>
</div>

【讨论】：

感谢您的回答。与其他答案相比，这非常冗长，包括一个简单地更改我使用的单位的选项。其他观众应该被引导到那里。
好吧，反正代码是兼容所有浏览器的。只是想试一试。一切顺利。