Giả sử có phần tử cha position: relative;, bốn thuộc tính này sẽ căn giữa một phần tử con theo cả chiều ngang và chiều dọc bên trong, bất kể chiều rộng chiều cao của một trong hai thuộc tính là bao nhiêu.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Xem Pen Centerer Mixin của Chris Coyier (@chriscoyier) trên CodePen.
Mặc dù hãy cẩn thận nếu phần tử con được căn giữa cao hơn phần tử gốc, phần trên có thể bị cắt bỏ.
Người yêu thích
Nếu bạn chỉ muốn tập trung vào một hướng…
@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%); ) )Xem Pen yybgZd của Chris Coyier (@chriscoyier) trên CodePen.