为啥没有一种合法的方式来垂直对齐元素？

Posted 2023-03-05

【中文标题】为啥没有一种合法的方式来垂直对齐元素？

【英文标题】：Why isn't there a legitimate way to vertically align elements?为什么没有一种合法的方式来垂直对齐元素？

【发布时间】：2012-05-25 22:33:52

【问题描述】：

CSS 是一个很棒的东西，但是为什么没有官方的“标准”方式垂直对齐其他容器内的 div 和文本呢？我拒绝在我的布局中使用表格，因为让我们面对现实吧，它不再是 90 年代了！

我知道有一些方法可以使内容显示为垂直居中，使用边距/填充或垂直对齐与适当的行高（这根本不是最佳的）。如果您的 div 与您希望垂直居中的文本内容在同一容器中具有指定高度，则使用边距不起作用，因为文本大小因浏览器而异，因此它实际上不会在所有浏览器中居中。

ANYBODY 是否知道是否存在或何时存在仅使用 CSS 轻松垂直居中内容的方法，而不是在当前的现代浏览器中使用表格？

【参考方案1】：

我建议使用一些轻量级的 jQuery 插件，它可以灵活地满足您的所有需求。示例如下：

(function ($) 
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() 
    return this.each(function(i)
    var ah = $(this).height();
    var ph = $(this).parent().height();
    var mh = Math.ceil((ph-ah) / 2);
    $(this).css('margin-top', mh);
    );
;
)(jQuery);

然后你只需使用你想要的选择器上的功能：

$('#example p').vAlign();

【讨论】：

也许...如果我使用 jQuery，这也将如何应用于文本对齐？

你可以在任何元素上置顶，不管它是否是文本，在我的例子中是它的段落

【参考方案2】：

您可能想查看this article，它提供了一种纯 CSS 技术，可将任意宽度和高度的子元素垂直居中。

【参考方案3】：

你可以试试这个：

<div style="display:table-cell; vertical-align:middle"> ... </div>

我认为您列出了所有其他方法

【讨论】：

所有浏览器都支持吗？

所有浏览器都支持 CSS 吗？我会查看caniuse.com 之类的网站或类似网站，以决定您是否要使用各种 CSS 选项。