居中 Mixin

假设父元素具有 position: relative;，这四个属性将水平和垂直地将子元素居中，无论两者的大小如何。

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.parent {
  position: relative;
}
.child {
  @include centerer;
}

查看 CodePen 上 Chris Coyier 的 Centerer Mixin。（@chriscoyier）

但是请注意，如果要居中的子元素比父元素高，顶部可能会被切掉。

更复杂

如果你想只在一个方向上居中…

@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 上 Chris Coyier 的 yybgZd。（@chriscoyier）