当没有祖先指定高度时，垂直居中 div [重复]

Question

当没有指定祖先的高度时，我需要将 div 垂直居中。

当 div 的高度

有什么想法吗？

.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>

Answer 1

这里是“出于某种原因”：

• 在大多数情况下，当溢出到右侧或底部时，用户希望溢出的内容仍可通过滚动访问。
• 在大多数情况下，当溢出到左侧或顶部时，用户希望溢出的内容被隐藏（并且无法通过滚动访问）。

例如，如果你给一个顶部菜单栏：

position:relative;
top: -100px;

您不希望浏览器允许用户滚动到它（因为看起来该页面的 padding-top 值为 100px）。

---

此类问题的一般解决方法是通过相应地增加父级或限制其内容的大小来防止居中的内容超出父级。