如何垂直居中块级元素？

Posted 2023-03-29

【中文标题】如何垂直居中块级元素？

【英文标题】：How to center a block level element vertically?

【发布时间】：2011-03-20 09:41:09

【问题描述】：

假设我有一个这样的：

<table style="margin-left: auto; margin-right: auto;">
  <tr>
    <td>
    </td>
  </tr>
</table>

margin-* 属性指示表格在其父元素内居中。

有没有类似的方式让元素垂直居中？

【问题讨论】：

Cross browser div center alignment using CSS的可能重复

【参考方案1】：

这是一个经常被要求做的事情。没有简单的方法来进行垂直对齐。有vertical-align 属性，但它用于行内元素的行对齐。查看this link 了解垂直居中的不同方法。

编辑：Here's another 让您入门的好链接。

【讨论】：

哈哈，你是第一个，所以你得到了dib。 :) 我会删除我的。

当他们拿出<center>标签时我抱怨了！

@attack - 哈哈，我只是重新加载删除我的，看到你的消失了。干杯！

@George - 居中可能会很痛苦，但我同意第二个链接，Method 3 更容易实现。

【参考方案2】：

我知道这是一个老问题，但是对于任何偶然发现这个以寻找类似问题的解决方案的人，我已经编写了一个 jQuery 插件，可以很容易地居中任何块元素。这不是为了推广我自己的项目，老实说，我只是想尽我所能提供帮助和贡献。有一个链接和演示here。

【讨论】：

指责 DNS 传播。 :p 现在检查？