With just one line of SCSS you can vertically and horizontally align or just vertically align, it has support both.
<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; }
}