Dengan mengandaikan elemen induk position: relative;, keempat-empat sifat ini akan memusatkan elemen anak baik di dalam secara mendatar dan menegak, tidak kira lebar ketinggian kedua-duanya.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Lihat Pen Centerer Mixin oleh Chris Coyier (@chriscoyier) di CodePen.
Walaupun berhati-hati jika elemen anak yang berpusat lebih tinggi daripada orang tua, bahagian atasnya dapat dipotong.
Lebih menarik
Sekiranya anda ingin berpusat hanya dalam satu arah ...
@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%); ) )Lihat Pen yybgZd oleh Chris Coyier (@chriscoyier) di CodePen.