Vertically centering a div when no ancestor has a height specified

Question

I need to vertically center a div when no ancestor has a height specified.

My solution works when the height of the div < the window height, but when it's bigger, and I have overflow set to allow scrolling, for some reason the top half is cut off...

Any ideas?

.parent {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  overflow: auto;
}
.content_div>div {
  border: 1px black solid;
  padding: 20px;
  display: inline-block;
}

  <div class="parent">
  <div class="child">
 <div class="logo_div"><img src="https://png.pngtree.com/element_pic/17/02/28/745c75d504f336a83a10e6dcf8db44fa.jpg"></div>
 <div class="content_div">
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
  <div>Hello world!</div>
 </div>
  </div>
  </div>

Check this answer: https://stackoverflow.com/questions/49278725/centered-flex-container-grows-beyond-top — Christian Vincenzo Traina, Jan 27 '19 at 20:39

score 1 · Answer 1 · answered Jan 27 '19 at 20:38

Here's the "for some reason":

in the majority of cases, when overflowing to right or bottom, users expect the overflowed content to still be reachable by scrolling.
in the majority of cases, when overflowing to left or top, users expect the overflowed content to be hidden (and not be reachable through scrolling).

For example, if you give a top menu bar:

position:relative;
top: -100px;

you do not expect browsers to allow users to scroll to it (as it would look like the page had a padding-top value of 100px).

The general fix for this type of problem is to prevent centered content from outgrowing the parent by either increasing the parent accordingly or by limiting the size of their contents.

Vertically centering a div when no ancestor has a height specified

1 Answers1