垂直对齐永远不会起作用

Question

是的,显然我做错了.为什么不能像水平对齐东西一样容易？我坐下来,我的工作停止了几个小时,试图查找如何在中间垂直对齐,所以我不必告诉你们,我最愚蠢的人很可能很容易对你提问.

显示块或表格单元格,我读到的所有内容都无法使用.我想"也许如果我将我的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在您的情况下）时，事情变得非常简单。

这是一个工作小提琴。

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

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