Horizontally Centering Div in Div is not working

Question

I"m trying to center a div within a div. At first, I thought I try to do horizontal centering but that's not working. I looked at this post for horizontal centering How to horizontally center a <div> in another <div>?

Here is my code http://codepen.io/anon/pen/VvLgrd. Here is the styling part of the code that matters

#homepage {
  position: relative;
}
#homepage canvas, #console {
  position: absolute;
}
#console {
  background: rgb(224,168,227);
  width: 75%;
  margin: 0 auto;
}

For some reason, the console div does not center inside of homepage div. I'm kinda confused.

Also, I was looking up how to center both vertically and horizontally. This website https://css-tricks.com/centering-css-complete-guide/ recommends to use

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

I tried it out and had

#homepage {
  position: relative;
}
#homepage canvas, #console {
  position: absolute;
}
#console {
  background: rgb(224,168,227);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

But it only centered horizontally. I was also confused on what it was doing? I'm not understand percents well. So if you have top: 50% that means "you sets the top edge position in 50% of #homepage". I don't get it. Also for transform: translate(-50%, -50%);, wouldn't that mean that you translate to the negative numbers?

score 3 · Answer 1 · answered Sep 09 '15 at 10:11

3

Your relative div doesn't have a height so it's inherited the height of the #console div.

If you remove the relative position from the #homepage your div will center.

#homepage canvas, #console {
  position: absolute;
}
#console {
  background: rgb(224,168,227);
  width: 75%;
  height: 60px;
  top: 0;
  right: 0;
  bottom:0;
  left: 0;
  margin: auto;
}

<div id="homepage">
    <canvas id="faces_bkgd"></canvas>
    <div id="console">
      <div id="name">
        <a href="./index.html">Jessica Gu</a>
      </div>
      <div id="content">
        <div id="menu">
        </div>
        <div id="information">
        </div>
      </div>
    </div>
    </div>

answered Sep 09 '15 at 10:11

Aaron

10,187
3
23
39

I thought I needed the relative for #homepage though? I read that absolute only positions itself according to the nearest position element that is not static (http://www.w3schools.com/css/css_positioning.asp) . If you get rid of relative, then homepage has a position of static – Jessica Gu Sep 09 '15 at 10:27
This is true, but your `#homepage` doesn't have a height attached. So is inheriting the height from the div you are trying to center. in which case the `#console` div is always going to be vertically centered within the `#homepage` – Aaron Sep 09 '15 at 10:30
how is #homepage inheriting the height from #console (the div you are trying to center)? I thought the parent of #homepage is body? – Jessica Gu Sep 09 '15 at 10:33
it is the parent of #homepage. A div doesn't have a height of 100% of the parent. The height of a div is relative to it's contents. – Aaron Sep 09 '15 at 10:46
I thought parent was the element that you were enclosed in? So console is inside of homepage, who is inside of body – Jessica Gu Sep 09 '15 at 10:52
the parent is the wrapping element. – Aaron Sep 09 '15 at 10:56

Derek Story · Answer 2 · 2015-09-09T10:35:36.157

2

You can center #console vertically and horizontally by removing the position: absolute; on the canvas:

Codepen

#homepage {
  position: relative;
}    
#console {
  position: absolute;
  background: rgb(224,168,227);
  width: 75%;
  margin: auto;
   top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Recommended reading: Center Anything with CSS

edited Sep 09 '15 at 10:35

answered Sep 09 '15 at 10:09

Derek Story

9,518
1
24
34

Can you explain how `translate(-50%, -50%)` works? I really don't get working with percents (esp negative) – Jessica Gu Sep 09 '15 at 10:32
I would recommend this article: http://www.studiomashbo.com/blog/article/center-anything-with-css – Derek Story Sep 09 '15 at 10:35
it was a pretty cool article. But i don't get the logic behind positioning an element from top by 50% and then negative margin it back by half it's own height. How does that make something centered? So if i have a container that is 70x70 and a inside_box that is 30x30 (want to center inside_box in container), inside_box has to be 20 away from container. So top:50% will put inside_box down at 45. Then translate(-50%,-50%) will push you up by 15 right? Therefore inside_box is 30 away from container – Jessica Gu Sep 09 '15 at 10:48
also, why do they use translate3D? why not use translate(..., ...)? Cause before they were using translateY(). Translate( , ) allows you to set x and y both simultaneously – Jessica Gu Sep 09 '15 at 10:49

score 2 · Answer 3 · answered Sep 09 '15 at 10:17

Centering it horizontally is not that hard, simply remove the position absolute from the console element, and the auto will work.

#homepage {
  position: relative;
}
#homepage canvas {
  position: absolute;
}
#console {
  position: relative;
  background: rgb(224,168,227);
  width: 75%;
  margin: 0 auto;
}

Centering the element vertically is harder in case the height of each element is not exact. I would remodel the entire css to use flexbox, since it gives you more control over element positioning: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Horizontally Centering Div in Div is not working

3 Answers3