我创建了一个.panel div，其中包含一些内容。我希望它在垂直和水平方向都居中。水平的cenetering我已经使用margin:auto;完成了，但我似乎无法使垂直居中工作。
根据this教程，我过去成功使用了很多次，我用<{1}}设置了
的样式.panel将位置设置为相对位置，并将其向上变换50％的大小，但顶部保持在0％，因此，面板是屏幕外的一半。同样，面板的高度设置为95％，但它也不服从。这不是那么重要 - 最后我希望高度是自动的，但我注意到它发生了，并且认为它可能是由于同样的问题导致顶部无法正确设置。知道是什么导致了这个吗？
答案 0 :(得分：4)
这是因为您使用的是基于百分比的单位。如果您希望元素居中 relative 到窗口，那么body的高度大于 （目前，{{1} } height元素是基于body元素定义的。
在这种情况下，你可以给它一个视口的高度：
.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%答案 1 :(得分：1)