html - 将 div 在其他 div 中居中对齐，并在垂直和水平方向居中对齐图像

Question

我正在尝试实现以下目标:我有一个中央 div(包装器)正好位于我页面的中心，垂直和水平。在那个 div 中，我想要另外 2 个 div，其中一个包含 Logo ，另一个包含一些文本。 Logo 图像还必须与其 div 的中心垂直和水平对齐。目前这是我所拥有的:

这是我的 HTML 和 CSS 的 jsfiddle:http://jsfiddle.net/7cQhG/

如何使 Logo div 居中(仅水平居中，顶部边距为 10 像素)，并使 Logo 图像在该 div 内居中，无论是水平还是垂直，就像现在一样)？

Answer 1

是否有任何理由必须将 Logo 作为 img？

我已经采用了您提供的起点，并组合了一个 jsFiddle 分支:http://jsfiddle.net/mori57/HDmkZ/

我已经取出 img 标签，并将其用作背景图像。 “center center”理论上应该将它置于其容器的中心，并且由于它是透明的 png，您的背景颜色仍会按照您的需要显示。

如果这对您有用，或者您有任何其他问题，请告诉我。

作为侧边栏，您真的不需要(也不应该)在您的 CSS 中指定您的标签。唯一真正合适的地方是，如果您将默认值分配给特定标签...否则，当您使用其中的 ID 时，特定规则已经开始接管。

请注意，我不清楚您想对 Logo 下方的文本做什么，所以我没有在那里做任何样式。