在父元素高度动态变化的情况下，如何使子元素div垂直居中

Question

我应该如何垂直对齐具有动态高度的父元素内的子元素。

CSS代码：

parent{
    height: 400px;
}
.child{
    position:relative;
    top:50%;
    transform: translateY(-50%;);
}

这将子元素设置一次，然后不再更改。如何更改它以使其随父元素的动态高度而更改？

- Optimus

---

这些可能会对你有所帮助 - https://jsfiddle.net/oe5g1sxc/ - moidul dargahi

Answer 1

您可以使用 display: flex。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100px;
  margin: 1em;
  background-color: tomato;
}

.child {
  width: 10px;
  height: 10px;
  background-color: yellow;
}

You can use `displa: flex`.

The following doesn't rely on parent's height.

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

- Lazar Ljubenović

---

那个解决方案非常hackish。flex-box有什么问题吗？它在所有主要浏览器中都得到了很好的支持，并且在这种简单情况下工作良好。 - Lazar Ljubenović

@Lazar...超酷的链接.. - Optimus

我认为你应该先仔细阅读问题，它明确提到高度和宽度是动态的，而不是固定的100像素。如果你知道宽度和高度，那么在垂直方向上设置非常容易。 - moidul dargahi

@lazar..谢谢...使用display:flex并进行了一些更改，对我很有帮助... - Optimus

@moiduldargahi 在这里的代码片段中，您不能将其设置为100％，因为100％表示其父级的100％，而.parent的父级没有指定的大小。您可以调整宽度和高度，并查看无论您将其更改为什么，它都将保持在完美的中心位置。该代码不依赖于parent的width和height属性。 - Lazar Ljubenović