CSS Less - 获取当前类的高度属性

Question

我有这个:

.class {
  height:10px; 
  padding:2px; 
  box-sizing:border-box;
}

.class .subclass {
  height:100%; 
  line-height:???;
}

如您所见，class 具有固定高度，但 subclass 具有相对百分比高度。尽管此高度的值为 100%，但它不等于父项的高度，因为它受父项的 padding 属性影响。我需要的是将 line-height 属性设置为等于 height 属性，以便使文本垂直居中。

问题:如何使用 LESS 获取当前类(我们正在设置 line-height 属性的类)高度？

我知道我可以通过这种方式设置变量然后进行计算:

@class-height:10px;
@class-padding:2px;
@subclass-height:calc(@class-height - @class-padding * 2); //*2 because of Top & bottom padding

.class {
  height:@class-height; 
  padding:@class-padding; 
  box-sizing:border-box;
}

.class .subclass {
  height:@subclass-height; 
  line-height:@subclass-height;
}

但我想知道是否有一种简单的方法可以实现这一点而无需计算和设置固定变量。

Answer 1

如果父级高度是固定值，则可以使用绝对定位。

.parent{
  height: 100px; 
  background-color: tomato; 
  width: 100%; 
}

.child{
  position: relative; 
  left: 0; 
  right: 0; 
  margin: 0 auto; 
  top: 50%; 
  transform: translateY(-50%);
  text-align: center; 
}

另一种选择是利用 table 的 vertical-align 属性，这样你就可以像这样编写你的 css。

.parent{
  height: 100px; 
  background-color: tomato; 
  width: 100%; 
  display: table;
  text-align: center; 
}

.child{
  display: table-cell;
  margin: 0 auto; 
  text-align: center; 
  vertical-align: middle; 
}