股利不服从“顶”或“高度”的风格

我有我已经创建，在它的一些内容.panel股利。我希望它垂直和水平居中。我已经完成了使用margin:auto;，但我似乎无法使垂直居中工作。

按this教程，这是我在过去成功地使用了很多次，我都称呼我.panel与

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

的位置被设置为相对的，它是由50％向上转变的是大小，但顶部停留在0％，因此面板在屏幕外一半。同样，面板的高度设置为95％，但它也不服从。这并不重要 - 最后我希望高度是自动的 - 但我注意到它发生了，并且认为它可能是由同样的问题引起的，这妨碍了顶部设置正确。任何想法是什么造成这个？

来源

2015-03-30 GtwoK

创建此之前，一个div相对定位，并与你现在所拥有的实际CSS绝对方式实际面板位置，因此它可以工作。 – codeninja 2015-03-30 23:00:06

这是因为您使用的是基于百分比的单位。如果你想要的元素集中相对的窗口，那么body需要有一个高度更大比它的内容（目前，该body元素的height基于.panel元素定义）。

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

Updated Example

body { 
    height: 100vh; 
}

你也绝对元素位置来代替。

Updated Example

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

或者，另一种方式来居中元件水平/垂直是添加top: 0; right: 0; bottom: 0; left: 0;，则由于一个height/width给出，margin: auto将有效水平居中的元件/垂直。

Updated Example

.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%的元素。

Updated Example

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

来源

2015-03-30 22:59:15

似乎为我工作 – 2015-03-30 23:01:05

优秀！不知道为什么'position：relative'在这种情况下不起作用，但绝对定位似乎！我会补充一件事：虽然绝对定位没有垂直居中，但它不再是水平方向的。为了解决这个问题，我已经将相同的原理应用到左边的位置（左边：50％; transform：翻译（-50％， - 50％）; – GtwoK 2015-03-30 23:11:14

的父元素具有相同高度的面板，这似乎可以解释为什么它不工作。您可以使面板绝对定位，或者可以向父元素添加高度。

Updated Example

html, body { height: 100%; }

来源

2015-03-30 23:07:16 syntacular

股利不服从“顶”或“高度”的风格

回答

相关问题