CSS中的垂直对齐？

Posted 2023-03-05

【中文标题】CSS中的垂直对齐？

【英文标题】：Vertical aligning in CSS?

【发布时间】：2010-10-23 19:59:53

【问题描述】：

所以我知道vertical-align: middle; 的所有问题以及人们在CSS 中用于垂直对齐元素的不同方法。但我还没有找到一个适合我需要它的工作。

基本上我的页面上只有一个<div>，我希望将其定位在页面的中心，水平和垂直。显然水平部分很容易，但我被垂直部分挂断了。我的问题是<div> 的高度未知；内容发生了变化，所以我无法为其指定高度。

有人有什么建议吗？如有必要，我愿意使用 javascript。谢谢！

【问题讨论】：

你不知道应该居中的元素的高度 - 但你知道周围区域的高度吗？

【参考方案1】：

正如你所说，你不介意使用 JS，这里是......（我通常从不回退到 JS 解决方案，但如果你对它很满意，那么我也是）

如果你的 CSS 是

#element 
    position: absolute;
    top: 50%;

那么你可以使用我的朋友 jQuery

$(document).ready(function() 
    var height = $('#element').height();
    $('#element').css(marginTop: '-' + (height / 2) + 'px')

);

注意，这是未经测试的，但应该是一个开始。希望 height / 2 能按预期工作，如果没有，请尝试使用parseInt()；

【参考方案2】：

长话短说，你 need two divs 获得纯 CSS 垂直居中。

不过，使用 Javascript，您可以do it with a single div。