Middle align a div vertically in another div using percentage value

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <title>tested html</title>
    <meta charset="utf-8">
</head>
<body>
<div id="outer-div" style="height:20em;background-color:red;">
    <div id="inner_div" style="height:50%;margin-top:25%;margin-bottom:25%;">This the inner-div to be centered inside outer-div</div>
</div>
</body>
</html>

There are already many solutions to center(vertically only) a div inside another one, but i just wonder why the inner_div above cannot get centered in its parent div(outer-div)?

The picture below is the html rendering result from my opinion, but actually result is completely different -- the outer-div get pushed down by inner-div's margin settings. so why?

not clear question; you want to make a dive center in parent div? — Pedram, Feb 24 '16 at 08:28
here's an explanation why you get such result http://stackoverflow.com/questions/12415661/using-marginauto-to-vertically-align-div — Ivan Leonenko, Feb 24 '16 at 08:33
check http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width — Gene R, Feb 24 '16 at 10:28
I can give you an answer without `margin` , actually for make a `div` center you can not get good result from `margin` if you want alternate way to do this, let me know. — Pedram, Feb 24 '16 at 11:10

ketan · Answer 1 · 2016-02-24T10:10:35.073

0

Use padding-top and padding-bottom instead of margin if you want to move you child div inside parent div.

<div id="outer-div" style="height:20em;background-color:red;">
    <div id="inner_div" style="height:50%;padding-top:25%;padding-bottom:25%;">This the inner-div to be centered inside outer-div</div>
</div>

Fiddle

Because padding gives space inside the container and margin gives the space outside the container. This is the basic concept.

Edit:

To clarify your confusion i have added background-color:yellow to inner div.

Fiddle Link contains margin-top as inner div take space from outside it will also move the outer div to below as it is position:static.

Instead give position:absolute as here it will move mover outer div to below.

This two image will explain more.

In above image you can check that inner div taking the margin. Check the pointer and yellow color is margin you can see from inspecting element.

And in above this image there is no margin show the outer div. As we point the outer div. But it just move the div below because of inner div.

edited Feb 24 '16 at 10:10

answered Feb 24 '16 at 08:42

ketan

17,717
41
50
83

Yes, it worked. But what i really want to know is the reason why margin cannot center the inner div, could you please give me some more in-depth explanation? – gaols Feb 24 '16 at 08:51
@gaols As i stated in answer margin gives space outside the container. so, it will move the div below not giving space inside the div. Read following post will give you brief definition. http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css and http://stackoverflow.com/questions/5958699/difference-between-margin-and-padding and http://www.htmldog.com/guides/css/beginner/margins/ – ketan Feb 24 '16 at 08:55
After some reading, i'm still not very clear, so I have updated my question and attach a picture to further express my question. – gaols Feb 24 '16 at 09:49
@ketan Your answer does not address the question directly, is counter-factual, and difficult to read. Please consider improving it. – Alin Purcaru Feb 24 '16 at 11:03
@AlinPurcaru You don't understood that doesn't mean my answer is wrong. Why down vote? – ketan Feb 24 '16 at 11:25
@ketan Well, technically, if someone does not understand an answer it does mean it is not good enough for SO. So a down vote may be appropriate. But that's not the reason for the downvote. The main reason is that you recommend hacks for centering. – Alin Purcaru Feb 24 '16 at 11:36
@AlinPurcaru I didn't recommend anything in my answer. And OP doesn't ask how to make center. They just ask why this is not behave like they want. – ketan Feb 24 '16 at 11:42

Alin Purcaru · Accepted Answer · 2016-02-24T11:06:28.770

Part 1. Collapsing Margins.

the outer-div get pushed down by inner-div's margin settings. so why?

This is a normal HTML rendering behavior and it is called collapsing margins. Excerpts from the specification:

Adjoining vertical margins collapse [...] Two margins are adjoining [...] top margin of a box and top margin of its first in-flow child

To explain it a bit, when you have a parent and its first child, with at least one of them having a top margin, the larger of the existing margins will be applied to the parent. (Except in some well defined situations - read the specs to see which they are.)

Part 2. Centering without extra elements.

i just wonder why the inner_div above cannot get centered in its parent div(outer-div)?

It actually can get centered, by using Flexbox with justify-content and justify-content both on center.

.parent {
  width: 300px;
  height: 200px;
  background-color: Green;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  width: 200px;
  height: 100px;
  background-color: Red;
}

<div class="parent">
  <div class="child"></div>
</div>

There are other techniques as well that can achieve the same result (by mixing table and inline display modes), but I wouldn't recommend using those in this century.

"collapse margin" is exactly the reason caused the problem. – gaols Apr 16 '16 at 15:20 — gaols, Apr 16 '16 at 15:20

Middle align a div vertically in another div using percentage value

2 Answers2