CSS Less - height-Eigenschaft der aktuellen Klasse Get

Question

Ich habe das bekam:

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

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

Wie Sie class hat eine feste Höhe sehen können, aber subclass hat eine relative Prozent Höhe. Diese Höhe hat trotz des Werts 100% nicht die Höhe von Parent, da sie von der padding Eigenschaft des Parents beeinflusst wird. Was ich brauche ist line-height Eigenschaft gleich height Eigenschaft, um den Text vertikal zu zentrieren.

Die Frage: Wie kann ich die aktuelle Klasse zu erhalten (die Klasse wir line-height Eigenschaft setzen) mit geringerer Höhe?

Ich weiß, ich Variablen einstellen und dann eine calc, auf diese Weise:

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

Aber ich möchte wissen, ob es eine einfache Möglichkeit, dies ohne Berechnungen zu erreichen und die Festsetzung von Fest Variablen.

Answer 1

Wenn die Elternhöhe eine feste Zahl ist, können Sie absolute Positionierung verwenden.

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

Die andere Option ist für table vertical-align Eigenschaft zu nehmen, so können Sie Ihre CSS so schreiben Vorteil.

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