CSS少ない - 現在のクラス

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プロパティを設定しているクラス）の高さを得ることができますか？

私は変数を設定して、CALCを行うことができます知っている、この方法：

@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; 
} 

他のオプションは、あなたがこのようなあなたのCSSを書くことができますtableのために垂直-alignプロパティを活用することです。

.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; 
}