Question

I have create a jsFiddle to demonstrate my problem:

http://jsfiddle.net/MXt8d/1/

.outer {
  display: inline-block;
  vertical-align: top;
  overflow: visible;
  position: relative;
  width: 100%;
  height: 100%;
  background: red;
}

.inner {
  overflow: hidden;
  height: 50%;
  width: 100%;
  margin-top: 25%;
  margin-bottom: 25%;
  background: blue;
  opacity: 0.7;
  color: white;
}

<div class="outer">
    <div class="inner"></div>
</div>

The thing is that when i need to horizontally center a div inside another.
I specify the height of the inner div in % (eg. 50%) and then the margin-top and margin-bottom to the remaining (eg. (100 – 50) / 2 = 25 %).

But as you see in the jsFiddle it’s not working as intended.

Calculating the margins from the Parent works, but it’s not possible for me, because I dont have access to the div’s parent, as the elements-style object is bound to the object via knockout.js and it’s not so simple as shown in the jsFiddle.

Hope anyone could help me 🙂

bj99

Update:

Just found out why this is actually happening, so I’ll post here for peaple with similar problems:

From http://www.w3.org/TR/CSS2/box.html#propdef-margin-top :

‘margin-top’, ‘margin-bottom’
Percentages: refer to width of containing block

And not as I tought to the height :-/

Answer 1

To #inner element:

1) Add position:absolute

2) Remove margin-top and margin-bottom properties

3) Add top:25%

That’s it!