scss mx-垂直中心

Posted 2021-05-17

<div class="card center-both">
  <p>center <strong>both</strong></p>
</div>
<p>@include center(<strong>both</strong>);</p>

<div class="card center-vert">
  <p>center <strong>vert</strong>ically only</p>
</div>
<p>@include center(<strong>vert</strong>);</p>


@mixin center($center-all) {
  position: absolute;
  @if $center-all == both {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  @else {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

/* mixin usage */
.center-both p {
  @include center(both);
}
.center-vert p {
  @include center(vert);
}

/* demo styles */
body {
  text-align: center;
}
.card {
  position: relative;
  width: 20em;
  height: 10em;
  margin: 2em auto 1em;
  background: #00FFFF;
}
p {
  margin: 0;
  strong { color: #0080FF; }
}