javascript - CSS中的垂直对齐？

Question

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

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

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

score 3 · Accepted Answer

长话短说，你需要两个 div来获得纯 CSS 的垂直居中。

但是，使用 Javascript，您可以使用单个 div来完成。

score 0 · Accepted Answer

正如你所说你不介意使用 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 回答 2