JSFiddle - React, Tailwind, and code Playground

HTML

<div id="y">
    <p>Centred on y axis</p>
</div>

<div id="x">
    <p>Centred on x axis</p>
</div>

<div id="both">
    <p>Centred on both axis</p>
</div>

SCSS

$size:120px;

@mixin centre($axis: "both"){
	position:absolute;
	@if $axis == "y"{
		top:50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
	}
	@if $axis == "x"{
		left:50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
	}
	@if $axis == "both"{
		top:50%;
		left:50%;
		-webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
	}	
}

div{
    display:block;
    background:#333;
    text-align:center;
    padding:$size/10;
    color:#777;
}

#y{
    @include centre(y);
}

#x{
    @include centre(x);
}

#both{
    @include centre;
}