如何在div中垂直居中放置图像
我有这样的标记：
<div>
<img />
</div>
div高于img：
div {
height: 100px;
}
img {
height: dynamic-value-smaller-than-100px;
}
我需要将图像放置在div的中间（在其上下具有相同的空白）。
我试过了，它不起作用：
div {
vertical-align: middle;
}
问题答案：
如果您的图像纯粹是装饰性的，那么将其用作背景图像可能是一种更语义化的解决方案。然后您可以指定背景的位置
background-position: center center;
如果它不是装饰性的并且构成有价值的信息，则img标签是合理的。在这种情况下，您需要使用以下属性设置包含div的样式：
div{
display: table-cell; vertical-align: middle
}
-
问题内容： 是否可以将div垂直居中放置在％高度div中？ 问题答案： 在这里以及在整个Internet上，已经被要求足够多次了。快速搜索将为您带来大量结果。无论如何，我这样做的首选方式是使用和。有关示例，请参见此页面。（请注意，这不适用于IE6。）
-
问题内容： 我想将添加到另一个div内的div居中。 这是我当前正在使用的CSS。 如您所见，我现在使用的方法取决于width和height的值。如果width / height发生变化，我将不得不修改and值。是否有任何通用解决方案可用于始终将居中对齐它的大小？ 我发现使用可以将innerDiv水平分配到中间，但是垂直分配中间呢？ 问题答案： tl; dr 垂直对齐中间作品，但是您将不得不在父元
-
我试图垂直（和水平）中心div（高度和宽度未知）在引导列。我可以水平中心的div设置文本对齐到中心。然而，我正在努力垂直居中的div。下面是我的代码片段： 提前感谢！
-
问题内容： 我正在尝试制作一个小的用户名和密码输入框。 我想问一下，如何垂直对齐div？ 我所拥有的是： 如何使ID为Username和Form的div垂直对齐中心？我试着把： 在CSS中用于ID为Login的div，但似乎不起作用。任何帮助，将不胜感激。 问题答案： 现代浏览器中最好的方法是使用flexbox： 某些浏览器将需要供应商前缀。对于不支持Flexbox的较旧的浏览器（例如IE9及更低
-
问题内容： 无论div元素有多高，我如何在h1标签内垂直居中放置h1标签？即如果用户更改他的浏览器高度，我希望h1根据新的高度在中心垂直对齐。 谢谢。 问题答案： 我遇到过的最好的解决方案是利用属性并将wrapper元素设置为，以允许对元素的使用居中： HTML CSS 经过测试 Windows XP Professional 2002版Service Pack 3 Internet Explor
-
问题内容： 编码： 如现在所呈现的，跨度与div的左下角对齐。 问题答案： 请参阅我关于理解垂直对齐的文章。在讨论的最后，有多种技术可以实现您想要的。 （超简短摘要：或者将子级的行高设置为等于容器的高度，或者将子级的高度设置为在容器上并将子级绝对定位为，其中YYY为子级已知高度的一半。）