如何在div中将高度可变的内容垂直居中？
当内容的高度可变时，垂直对齐div内容的最佳方法是什么？在我的特定情况下，容器div的高度是固定的，但是如果有一种解决方案在容器具有可变高度的情况下也能解决问题，那将是很好的。另外，我希望不使用CSS
hack和/或使用非语义标记，或者很少使用CSS hack和/或非语义标记的解决方案。
问题答案：
只需添加
position: relative;
top: 50%;
transform: translateY(-50%);
到内部div
它的作用是将内部div的顶部边框移到外部div的一半高度（top: 50%;），然后将内部div向上移动一半其高度（transform: translateY(-50%)）。这将与position: absolute或一起使用relative。
请记住，transform并translate具有供应商前缀，为简单起见不包括在内。
-
问题内容： 是否可以将 div 垂直居中于％height div中 ？ 问题答案： 在这里以及整个Internet上，已经被要求足够多次了。 快速搜索将为您带来大量结果。无论如何，我这样做的首选方式是使用和。
-
问题内容： 是否可以将div垂直居中放置在％高度div中？ 问题答案： 在这里以及在整个Internet上，已经被要求足够多次了。快速搜索将为您带来大量结果。无论如何，我这样做的首选方式是使用和。有关示例，请参见此页面。（请注意，这不适用于IE6。）
-
问题内容： 我正在尝试制作一个小的用户名和密码输入框。 我想问一下，如何垂直对齐div？ 我所拥有的是： 如何使ID为Username和Form的div垂直对齐中心？我试着把： 在CSS中用于ID为Login的div，但似乎不起作用。任何帮助，将不胜感激。 问题答案： 现代浏览器中最好的方法是使用flexbox： 某些浏览器将需要供应商前缀。对于不支持Flexbox的较旧的浏览器（例如IE9及更低
-
问题内容： 编码： 如现在所呈现的，跨度与div的左下角对齐。 问题答案： 请参阅我关于理解垂直对齐的文章。在讨论的最后，有多种技术可以实现您想要的。 （超简短摘要：或者将子级的行高设置为等于容器的高度，或者将子级的高度设置为在容器上并将子级绝对定位为，其中YYY为子级已知高度的一半。）
-
问题内容： 无论div元素有多高，我如何在h1标签内垂直居中放置h1标签？即如果用户更改他的浏览器高度，我希望h1根据新的高度在中心垂直对齐。 谢谢。 问题答案： 我遇到过的最好的解决方案是利用属性并将wrapper元素设置为，以允许对元素的使用居中： HTML CSS 经过测试 Windows XP Professional 2002版Service Pack 3 Internet Explor
-
问题内容： 我正在使用的div是父div高度的100％。 div仅包含一行文本。 div不能具有固定的高度。 所以我的问题是。 如何垂直对齐文本行？ 我试过使用： 如果很重要，则div是绝对定位的。 当前的CSS 问题答案： 这个答案不再是最好的答案…请参阅下面的flexbox答案！ 为了使其完全居中（如大卫的回答中所述），您需要添加负的上边距。如果您知道（或强制）只有一行文本，则可以使用： 例如