垂直对齐永远不会起作用答案

【问题标题】：Vertical aligning never ever works垂直对齐永远不会起作用
【发布时间】：2014-01-12 11:47:19
【问题描述】：

是的，显然我做错了。为什么不能像水平对齐一样简单？我坐着，我的工作连续几个小时停止，试图查找如何在中间垂直对齐，所以我不必用我愚蠢的最可能真的对你来说很容易打扰你们问题。

显示块或表格单元，我阅读的所有内容都无法正常工作。遗憾的是，我想“也许如果我将我的 img 与.divID img 水平对齐，然后垂直对齐 div 本身”，我希望这能奏效。但是，即使我确实尝试将 div 垂直居中在中间，它也会使图像居中变得混乱，甚至无法正常工作。

TL;DR：我讨厌试图垂直对齐东西如此。

我试图让我的标题图像垂直和水平居中。这是我正在处理的代码。

HTML

<div id="wrapper">
    <div id="header">
        <div id="logo">
            <img src="http://i.imgur.com/d0umnxt.png" />
        </div>
    </div>
</div>

CSS

body {
    margin: 0px;
}
#header {
    width: 100%;
    height: 100px;
    background-color: #151B1F;
}
#logo {
    display: block;
    margin: auto;
}

【问题讨论】：

ErraticFox，一个为跨浏览器解决方案提供赏金的模拟 Q，(IEstackoverflow.com/questions/7273338/…
+1 @Wayne 的链接。从来没有见过这种方法，但男人很酷。
@Wayne 我试过了，我无法让它为自己工作。
不稳定地将 .helper 放置为 logo 的兄弟。 display:inline-block logo 和 .helper。 CSS 助手高度：100%。 img 的高度仍然未知。垂直对齐：两个元素徽标和助手的中间。 Logo div 高度将扩展为 img 高度，并且 center 将与 helper 的中心对齐。是的，它有点复杂。
@Wayne 是的，但似乎不可能使用该方法添加与图像垂直居中的文本。至少据我所知，用给我的方法垂直居中文本似乎也是不可能的。 :\

标签： html css

【解决方案1】：

我和下一个家伙一样讨厌table 和table-cell，但是当您知道父元素的高度（在您的情况下为#header）时，事情变得非常容易。

Here's a working fiddle.

您只需将以下样式添加到您的 CSS：

#header {
    display: table;
}
#logo {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

【讨论】：

说，如果我在同一个 div 中有两个图像，我希望它们并排垂直和水平对齐在中心，这可行吗？ :)
我的意思是水平并排：P
在这种情况下，请使用原始小提琴并在 #logo 内添加另一个 img。