如何在div中将高度可变的内容垂直居中？

小编典典

css

当内容的高度可变时，垂直对齐div内容的最佳方法是什么？在我的特定情况下，容器div的高度是固定的，但是如果有一种解决方案在容器具有可变高度的情况下也能解决问题，那将是很好的。另外，我希望不使用CSS
hack和/或使用非语义标记，或者很少使用CSS hack和/或非语义标记的解决方案。

阅读 372

2020-05-16

共1个答案

小编典典

只需添加

position: relative;
top: 50%;
transform: translateY(-50%);

到内部div

它的作用是将内部div的顶部边框移到外部div的一半高度（top: 50%;），然后将内部div向上移动一半其高度（transform: translateY(-50%)）。这将与position: absolute或一起使用relative。

请记住，transform并translate具有供应商前缀，为简单起见不包括在内。

2020-05-16