Question

我想将div水平和垂直居中。我试图像这样管理它：

div {
    background: red;
    width: 200px;
    height: 200px;
    position: absolute;
    margin-top: 50%;
    margin-left: 50%;
    top: -100px;
    left: -100px;
}

由于某种原因，margin-top xx%取决于页面的宽度，而不是高度。 jsFiddle：http://jsfiddle.net/MxE8Y/embedded/result/

我错了什么？如何在不使用javascript的情况下修复它？

Answer 1

顶部/底部padding / margin的百分比值是相对于包含块的框的宽度。

<强> 8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'

<percentage>百分比是根据宽度计算的   包含块的生成框的内容。请注意，这是真的   ＆＃39;边距＆＃39;和＆＃39; margin-bottom＆＃39;同样。如果包含块的话   width取决于此元素，然后生成的布局未定义   在CSS 2.1中。

尝试使用top和left属性来定位绝对定位的元素，并在左上角/左margin使用负值：

<强> EXAMPLE HERE

div {
    background: red;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

Answer 2

垂直％与父宽度相关的原因：

百分比是根据生成的包含块的宽度计算的。请注意，对于＆＃39; margin-top＆＃39;和＆＃39; margin-bottom＆＃39;同样。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

http://www.w3.org/TR/CSS2/box.html#margin-properties

Hashem Qolami的答案告诉你该怎么做：）

否则，您可以使用显示屏将所有内容保留在流程中：（display:table）http://jsfiddle.net/MxE8Y/2/

body, html  {
    background: green;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display:table;
}
body {
    display:table-cell;
    vertical-align:middle;
}

div {
    background: red;
    width: 200px;
    height: 200px;
    margin:auto;
}

或http://codepen.io/anon/pen/iJgbv/（显示：flex）：

html,body {
  height:100%;
  width:100%;
  margin:0;
}
body {
  display:flex;
}
div {
  width:100px;
  height:100px;
  background:gray;
  margin:auto;
}

Answer 3

使用translate -50％方法的2016选项

<强> CSS

div {
    position: absolute;
    top: 50%;  left: 50%;
    transform: translate(-50%, -50%);
}

<强>拨弄

http://jsfiddle.net/Hastig/MxE8Y/6/

margin-top：50％很奇怪

3 个答案: