vertically centering the element for auto height div

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

I cannot use flexbox css for some reason. And I also tried with transform css technique and various techniques such as table but even couldn't get vertical center.

I cannot change the markup and please if possible without touching the css for #main would be great for me.

Answer 1

You can center an element vertically within it's container using this technique:

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

Set position: relative; on the #main container to make #foo relate to it.

Demo

Answer 2

Try this:

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