div内垂直对齐，垂直对齐：中间不起作用答案

【问题标题】：Vertical align inside div, vertical-align: middle not workingdiv内垂直对齐，垂直对齐：中间不起作用
【发布时间】：2019-10-20 08:27:53
【问题描述】：

垂直对齐：中间；不工作。

From css file :
#header {height:150px; text-align: center; vertical-align: middle;}

<div id="header">
    <img alt="" id="logo" src="images/logo.png" />
</div>

如果它有助于将徽标与包装器 div 的中心对齐，我会将徽标包装在另一个 div 中。

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

这样做

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

Reference

【讨论】：

你需要为此使用 CSS hack
这是最好的答案！所有其他答案都试图重塑 HTML。
虽然不支持 IE7
但是，与块相比，这改变了 div 的对齐方式

【解决方案2】：

您只能通过填充来做到这一点，因为 line-height 和 vertical-align 的其他两种方式不能在 img.... 上工作。

写

#logo
{
padding: 20px 0;
}

20px 可以是任何你需要的东西。

【讨论】：

，这行得通，但我认为这是一种 hack，只是不明白为什么 vertical-alig:middle 不起作用。
我对 css 很擅长，但还是经常面对这个问题，vertical-align 在很多地方都不能满足我们的要求
@Chuchelo：这不是一个 hack，因为在这种情况下没有垂直对齐之类的东西，因为它只用于内联元素。搜索 vertical align css 和 you will find thousands of explanations and workarounds。

【解决方案3】：

另一种选择，尽管它有其局限性：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <div style="height:150px; text-align: center;">
      <img src="/centerme.jpg" style="position: relative; top: 50%; margin-top: -25px;" />
   </div>
</body>
</html>

负边距应该是图片高度的一半。所以下面的图片会在上面的 HTML 中居中：

如果您碰巧有一个改变高度的 div，这会使居中动态化。不过，相对定位可能会有点棘手，因为图像是从正常的布局流程中取出的。

【讨论】：

射击，当我提交这个时，我还没有看到佩德罗的回应。我希望我可以轻松删除我的答案:-)

【解决方案4】：

#logo {
    position: absolute;
    top: 50%;
    margin-top: -75px;
}

做垂直对齐的常用方法。 top 为 50%，margin-top 为父 div 尺寸的一半。

【讨论】：

当然家长潜水必须指定position: relative;的风格

【解决方案5】：

我喜欢这样做：

<div style="relative">
<img alt="" id="logo" src="images/logo.png" style="position: absolute; top:50%; top-margin:-75px"/>
</div>

【讨论】：

这是一个立场：绝对；不是绝对的。
@lnuyasha：style="relative" 也应该换成style="position: relative"，不是吗？

【解决方案6】：

我不知道为什么它在我的情况下起作用...但我可以通过以下操作看到它起作用：

div {padding-top: 0%;}

【讨论】：