Vertically center a div in a div in css concept

Question

Here is my html and css code is below:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <style>
        body{
            background-color: deepskyblue;
        }

        .main{
            background-color: black;
            color: white;
            width: 100px;
            height: 100px;
        }

        .inside{
            background-color: orangered;
            width: 50%;
            height: 50%;
            margin: 25%;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="inside"></div>
    </div>
</body>

</html>

I want it looks like:

But it actually looks like:

I am not asking how to fix it (I know I can using "position" to solve it). My question is why vertically the "inside" div box does not goes to center? From the inspect I can see that the margin(top) of "inside" does not based on "main" div box. However, horizontally the margin(left) of "inside" is based on "main" div box. I would like to know the concept of this.

http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width — Michael Coker, May 08 '17 at 20:03
Possible duplicate of http://stackoverflow.com/q/19718634/901048 — Blazemonger, May 08 '17 at 20:43
tags have a have a "block" display. If you set the ".inside" class to have "display:inline-block", you will get the results you desire. There are questions that ask what the difference between "block" and "inline-block" are. — Makotosan, May 08 '17 at 20:54

score 2 · Answer 1 · answered May 08 '17 at 20:08

2

You can use my created helper class to make your div center align vertically / horizontally / both.

.center-x{ position: absolute; left: 50%; transform: translateX(-50%);  }

.center-y{ position: absolute; top: 50%; transform: translateY(-50%); }

.center-xy{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Just apply one of these class in your <div class="inside"></div>

Hope it will solve your problem

answered May 08 '17 at 20:08

Giulio Bambini

4,695
4
21
36

Thank you for your answer and code. Actually, I know how to solve this problem, but what I am looking for is the concept behind this. – Yode Zage May 08 '17 at 20:12

score 2 · Accepted Answer · edited May 23 '17 at 12:02

2

In this particular case, the top margins are collapsing -- in effect, the 25% top margin is being transferred to the .main container. You can prevent this in a few ways -- for instance, by adding overflow: auto to .main:

html,
body {
  margin: 0;
}

body {
  background-color: deepskyblue;
}

.main {
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  overflow: auto;
}

.inside {
  background-color: orangered;
  width: 50%;
  height: 50%;
  margin: 25%;
}

<div class="main">
  <div class="inside"></div>
</div>

edited May 23 '17 at 12:02

Community

1
1

answered May 08 '17 at 20:41

Blazemonger

90,923
26
142
180

Thank you for answering that, the reason is top (and bottom) margins will collapsing by default. – Yode Zage May 10 '17 at 20:44

Getter Jetter · Answer 3 · 2017-05-08T20:13:59.227

1

Use flexbox in your .main rules

.main{
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  display : flex;
  align-items : center;
  justify-content:center;
}

You also can remove the margin from your .inside element

.inside{
  background-color: orangered;
  width: 50%;
  height: 50%;
}

edited May 08 '17 at 20:13

answered May 08 '17 at 20:09

Getter Jetter

2,033
1
16
37

Thank you for the code. Actually, I am not looking for how to solve this problem, what I am looking for is the concept behind this. – Yode Zage May 08 '17 at 20:13
No problem, still want to thank you for your answers. – Yode Zage May 08 '17 at 20:16

Gacci · Answer 4 · 2017-05-08T20:18:32.907

0

Simply add position: relative to .main and position: absolute to inside. As for the concept, you have a container with relative positioning and a set with and height. Then your inner div with positioning absolute has a width of 50% + 25% margin on each side = 100%. Same goes for the height, top and bottom.

The ones that use transform, they position the element with left-top to the center of its container and then shifted by 50% of the child's height and 50% of the child's width.

body{
   background-color: deepskyblue;
}
.main{
 background-color: black;
 color: white;
 width: 100px;
 height: 100px;
  position: relative;
}

.inside{
  position: absolute;
 background-color: orangered;
 width: 50%;
 height: 50%;
 margin: 25%;
}

<div class="main">
  <div class="inside"></div>
</div>

edited May 08 '17 at 20:18

answered May 08 '17 at 20:10

Gacci

1,388
1
11
23

Thank you for your help, that is my solution as well. However, I am not looking for how to solve this problem, what I am looking for is the concept behind this. – Yode Zage May 08 '17 at 20:14
Thank you for adding these concept, I really appreciate. I understand the concept after we add the "position" for both "main" and "inside" div, but still not clear without these "position" why it works for horizontally, but not for vertically? In addition, if I change all "%" to be "px" these problem still there. – Yode Zage May 08 '17 at 20:28
Well, you need some sort of reference in order to render elements. That's what positioning provides! If that does not make sense then you need to read about positioning before you can understand margins or paddins! – Gacci May 08 '17 at 20:29

Vertically center a div in a div in css concept

4 Answers4