类似CSS类的函数

编辑：如果以前有人问过这个问题，或者这是一个众所周知的技术问题，我很抱歉。我不知道这将被称为什么，因此我无法搜索它

在我的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;
}

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

.vcenter（高度）
{
位置：绝对位置；
保证金：自动；
排名：0；
底部：0；
高度：高度；
}

---

如果我可以实现这样的东西，那么我就不必每次都重复代码来垂直居中。CSS有实现这一点的方法吗？

本机CSS没有实现这一点的方法。我建议看看Javascript解决方案

jQuery解决方案如下所示：

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

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

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

---

你不喜欢这样做吗

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

使用两个类

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

---

您可以使用css表达式，但不能。浏览器和糟糕的实践对它的支持很差

我建议使用css生成工具：

---

或者

不幸的是，CSS没有这样的东西。。。这也是我的愿望：）如果用户从不调整窗口大小会发生什么？我不认为OP需要在调整窗口大小时执行它。非常确定在窗口第一次实例化时调用了

resize（）

。如果我错了，只需将相同的代码放在

onReady

处理程序中。在这种情况下，这肯定会起作用。我想垂直对齐是一个糟糕的例子。我对垂直对齐本身不太感兴趣，而是知道CSS是否有这样的功能，因为我（可能很天真）的猜测是，它会在其他地方非常方便。downvoter:这到底是怎么回事？CSS没有一个本地的方法来解决这个问题，我的答案是语义上的，有意义的方法。