Question

我有以下CSS代码：

.over_center {
position:absolute;
top: 50%;
left:50%;
height: 160px; /* two thirds (2/3) of parent size */
width: 160px; /* two thirds (2/3) of parent size */
margin-top: -80px; /* negative one third of parent size */
margin-left: -80px; /* negative one third of parent size */
line-height: 160px; /* two thirds (2/3) of player size */
text-align: center;
}

正如你所看到的，我有评论提醒我，这些地方的值应该相对于父大小，这可能会有所不同（但总是正方形，宽度=高度）。

显然我可以使用js来相应地设置这些样式，但我相信如果有一种方法可以直接在CSS中使用它，那将会更加清晰。

Answer 1

由于绝对定位的工作原理，这取决于你的父元素是什么。

如果父元素有position: relative，那么这个父元素就是你的元素containing block，而你可以简单地使用大部分百分比，就像你使用top一样和left属性：

height: 66%;
width: 66%;
margin-top: -33%;
margin-left: -33%;

除了height（但包括margin-top）之外的所有这些百分比都与包含块宽度有关，但是因为你知道它总是一个正方形，所以对你来说不会有问题。 / p>

line-height有点不同：它的值通常与字体大小有关。如果你需要它相对于高度，你必须自己硬编码绝对值。至少在父级维度发生变化时，您只需要更新一个值。

如果父元素没有position: relative，则包含的块位于其他位置，您将无法使用任何这些属性的百分比。那么你必须对这些值进行硬编码。

Answer 2

对于大多数人来说，你可以使用百分比：

.over_center {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 66.66%;       /* Relative to containing block's height */
    width: 66.66%;        /* Relative to containing block's width */
    margin-top: -33.33%;  /* Relative to containing block's width */
    margin-left: -33.33%; /* Relative to containing block's width */
    line-height: 160px;   /* Problem here */
    text-align: center;
}

请注意，如果父元素不是containing block，它将无效。在这种情况下，由于它具有position: absolute，因此包含块由最近的非静态定位祖先建立。

对于line-height（以及父项不是包含块的其他属性），您有一些选项：

使用JavaScript
使用服务器端脚本
使用CSS预处理器
使用CSS variables。警告：实验性功能，浏览器支持可忽略不计。

Answer 3

在CSS中没有简单的方法，但你可以使用像LESS这样的东西：

@parser: 240px;
.over_center {
    height: @parser * 2 / 3;
    width: @parser * 2 / 3;
    margin-top: @parser / -3;
    margin-left: @parser / -3;
    line-height: @parser * 2 / 3;
}

通过这种方式，您只需更改单个值即可影响所有内容。

如何设置相对于父节点的CSS属性？

3 个答案: