html - 垂直对齐永远行不通

Question

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

Display Block 或 Table-Cell，我阅读的所有内容都不起作用。可悲的是，我想“也许如果我将我的 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;
}

Answer 1

我和下一个家伙一样讨厌 table 和 table-cell，但是当你知道父元素的高度时 (#header 在你的情况下)，事情变得非常简单。

Here's a working fiddle .

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

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