Div 不服从"顶部"或"高度"样式

Question

Fiddle

我创建了一个.paneldiv，里面有一些内容。我希望它在垂直和水平方向上都居中。水平居中我已经使用margin:auto;完成了，但我似乎无法使垂直居中工作。

根据我过去多次成功使用的本教程，我用设计了我的.panel

.panel {
    position:relative;
    top:50%;
    transform: translateY(-50%);
}

该位置设置为相对位置，并向上变换其大小的50%，但顶部保持在0%，因此，面板有一半在屏幕外。同样，面板的高度设置为95%，但它也没有遵守这一点。这并没有那么重要——最终我希望高度是自动的——但我注意到了这种情况的发生，并认为这可能是由阻止顶部正确设置的相同问题引起的。知道是什么原因造成的吗？

Answer 1

这是因为您使用的是基于百分比的单位。如果希望元素相对于窗口以为中心，则body的高度需要比其内容大（目前，body元素的height是基于.panel元素定义的）。

在这种情况下，您可以给它一个视口的高度：

更新示例

body {
    height: 100vh;
}

---

您也可以完全定位元素。

更新示例

.panel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

---

或者，将元素水平/垂直居中的另一种方式是添加top: 0; right: 0; bottom: 0; left: 0;，那么由于给定了height/width，margin: auto将有效地使元素水平/竖直居中。

更新示例

.panel {
    position: absolute;
    width: 95%;
    height: 95%;
    margin: auto;
    top: 0; right: 0;
    bottom: 0; left: 0;
}

---

但是，由于width/height是使用基于百分比的单位指定的，因此实际上可以使用top: 2.5%/left: 2.5%仅将元素居中。

更新示例

.panel {
    position: absolute;
    width: 95%;
    height: 95%;
    left: 2.5%;
    top: 2.5%;
}

Answer 2

父元素的高度与面板的高度相同，这似乎就是它不起作用的原因。可以使嵌板处于绝对位置，也可以为父图元添加高度。

更新的示例

html, body { height: 100%; }