Question

编辑：如果以前曾被问到或者是一个着名的技术人员，我道歉。我不知道这会被称为什么，因此我无法搜索它。

在我的HTML文档中，我垂直居中，如下所示：

<div style='position:  absolute; margin:  auto; top:  0; bottom:  0; height:  500px'>
<!-- CONTENT HERE -->
</div>

这很有效，唯一的问题是，代码不能完全重用，因为它取决于块的特定高度。我想做的是这样的事情：

<div class='vcenter(500px)'>
<!-- CONTENT HERE -->
</div>

.vcenter(height)
{
    position:  absolute;
    margin:  auto;
    top:  0;
    bottom:  0;
    height:  height;
}

如果我可以实现这样的东西，那么每次我想垂直居中时，我都不必重复代码。 CSS有办法实现这个吗？

Answer 1

你不喜欢这样做吗？

<div class='vcenter' style='height: 500px'>
<!-- CONTENT HERE -->
</div>

Answer 2

你可以使用css表达式，但不要。它受到浏览器和糟糕做法的严重支持。

我建议使用css生成工具： http://lesscss.org/或http://compass-style.org/

Answer 3

使用原生CSS无法做到这一点。我建议看一下Javascript解决方案。

jQuery解决方案看起来像这样：

$(function(){
    $(window).resize(function(){
        var newHeight = $(window).height() * someRatio;
        $("#yourElement").css('height', newHeight);
    });
});

Answer 4

使用两个类。

<div class="universal specific-style">
  <!-- content -->
</div>

.universal和specific-style应该有更多的语义名称。然后，在样式表中：

.universal {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
}

.specific-style {
  height: 200px;
}

类似函数的CSS类

4 个答案: