Üst öğenin sahip olduğunu varsayarsak position: relative;, bu dört özellik, yüksekliğinin genişliği ne olursa olsun, alt öğeyi hem yatay hem de dikey olarak içeride ortalayacaktır.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen Centerer Mixin'i görün.
Ortalanan alt öğe ebeveynden daha uzunsa dikkatli olunsa da, üst kısım kesilebilir.
Meraklısı
Yalnızca tek bir yönde ortalayabilmek istiyorsanız…
@mixin centerer($horizontal: true, $vertical: true) ( position: absolute; @if ($horizontal and $vertical) ( top: 50%; left: 50%; transform: translate(-50%, -50%); ) @else if ($horizontal) ( left: 50%; transform: translate(-50%, 0); ) @else if ($vertical) ( top: 50%; transform: translate(0, -50%); ) )CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen yybgZd'ye bakın.