CSS - margin top of 50% is more than 50%
css, html
Solution
This is because when it comes to top/bottom margins and paddings in percentages, the values will be taken as the fractional width of the parent element, not the height. According to the W3C definition:
The [margin] percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
This question has been addressed before in StackOverflow - see here.
Suggestion: If you would want to position an element in the center vertically, you can use the following trick instead:
- Position the child element absolutely
- Declare dimensions for the parent, such that the parent's dimensions do not rely on those of the child
- Position the child element 50% from the top
- Use a nifty trick of CSS 2D translation.
Here's the modified CSS from your fiddle that works:
.content header {
width: 100px;
height: 100px;
top: 50%;
background: red;
position: absolute;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
http://jsfiddle.net/teddyrised/73xkT/7/
Problem
I want a child div with a op-margin via percentage. The y-position shall be 50% percent of the parent div. But it is somehow more. Why isn't it 50% ? js fiddle HTML ``` <div class="content"> <header></header> </div> ``` CSS ``` .content { width: 300px; height: 200px; background: blue; position: relative; clear: both; } .content header { width: 100px; height: 100px; margin-top: 50%; background: red; position: relative; float: left; } ```