Question

HTML：

<div id="main">
    <div id="foo">foo</div>
</div>

的CSS：

html,body{
    height: 100%;
}
#main{
    height: 100%;
}
#foo{
    height: auto;
    /* height: 100%; I cannot use height 100% or fixed height for this element*/
}
#foo:before{
    content: "bar";
/*I want to use the height in percentage which won't work but work with px*/
    height: 100%;
    display: block;/* or inline-block*/
}

demo

出于某种原因，我无法使用flexbox css。我也试过变换css技术和各种技术，如表，但甚至无法获得垂直中心。

我无法更改标记，如果可能的话，请不要触及#main的CSS对我来说很棒。

Answer 1

您可以使用以下技术将元素在其容器中垂直居中：

#foo{
    position: absolute;
    top: 50%; // move down 50% of parent
    transform: translateY(-50%); // move back up 50% of own height
}

在position: relative;容器上设置#main，使#foo与之相关。

Demo

Answer 2

试试这个：

#foo {
height: auto;
margin:auto;
position:absolute;
top:50%;
}

垂直居中自动高度div的元素

2 个答案: