Transform e position relative - No 2 works!

Question

Galerinha I need a help with Transform, and position relative! http://codepen.io/anon/pen/mWNJjR Here the button works perfect, when you pass the mouse it increases, using the Transform, but is not centered and responsive the way I need.

.playbuttondiv {
    position: absolute;
    top: 33%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
    transform: translateX(-50%) translateY(-50%) scale(1, 1);
	font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 1.42857143;
	color: #222;
}

.playbutton {
    background-color: #31ae1f;
    z-index: -1;
	box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.15);
	text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
	font-size: 36px;
	line-height: 39px;
	text-decoration: none;
	padding: 23px 23px 21px 23px;
	color: white;
	letter-spacing: 1px;
	font-family: 'Noto Sans', sans-serif;
	border-top: 4px solid #64fd1f;
    border-bottom: 4px solid #1e8c03;
    border-left: 4px solid #156c00;
    border-right: 4px solid #47d009;
	font-weight: bold;
	position: fixed;
}

.playbutton:hover {
	background-color: #272727;
    border-top-color: #3d3d3d;
    border-bottom-color: #000;
    border-right-color: #2f2f2f;
    border-left-color: #171717;
	outline-offset: -2px;
	color: white;
	webkit-transform: scale(1.1);
    transform: scale(1.1);

}

		<div class="playbuttondiv">
            <a class="playbutton">Jogar</a>
        </div>

http://codepen.io/anon/pen/ryXVrR Here’s the relative position, centered and responsive, the way I need it, but Transform just doesn’t work, it’s ignored.

.playbuttondiv {
    position: absolute;
    top: 33%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
    transform: translateX(-50%) translateY(-50%) scale(1, 1);
	font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 1.42857143;
	color: #222;
}

.playbutton {
    background-color: #31ae1f;
    z-index: -1;
	box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.15);
	text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
	font-size: 36px;
	line-height: 39px;
	text-decoration: none;
	padding: 23px 23px 21px 23px;
	color: white;
	letter-spacing: 1px;
	font-family: 'Noto Sans', sans-serif;
	border-top: 4px solid #64fd1f;
    border-bottom: 4px solid #1e8c03;
    border-left: 4px solid #156c00;
    border-right: 4px solid #47d009;
	font-weight: bold;
	position: relative;
}

.playbutton:hover {
	background-color: #272727;
    border-top-color: #3d3d3d;
    border-bottom-color: #000;
    border-right-color: #2f2f2f;
    border-left-color: #171717;
	outline-offset: -2px;
	color: white;
	webkit-transform: scale(1.1);
    transform: scale(1.1);

}

		<div class="playbuttondiv">
            <a class="playbutton">Jogar</a>
        </div>

Can you give me a hand? I need exactly 2...

Answer 1

Uses the calc to remove half the button size to center: top: calc(50% - 92px/2); left: calc(50% - 156px/2); .

.playbuttondiv {
    position: absolute;
    top: calc(50% - 92px/2);
    left: calc(50% - 156px/2);
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
    transform: translateX(-50%) translateY(-50%) scale(1, 1);
	font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 1.42857143;
	color: #222;
}

.playbutton {
    background-color: #31ae1f;
    z-index: -1;
	box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.15);
	text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
	font-size: 36px;
	line-height: 39px;
	text-decoration: none;
	padding: 23px 23px 21px 23px;
	color: white;
	letter-spacing: 1px;
	font-family: 'Noto Sans', sans-serif;
	border-top: 4px solid #64fd1f;
    border-bottom: 4px solid #1e8c03;
    border-left: 4px solid #156c00;
    border-right: 4px solid #47d009;
	font-weight: bold;
	position: fixed;
}

.playbutton:hover {
	background-color: #272727;
    border-top-color: #3d3d3d;
    border-bottom-color: #000;
    border-right-color: #2f2f2f;
    border-left-color: #171717;
	outline-offset: -2px;
	color: white;
	webkit-transform: scale(1.1);
    transform: scale(1.1);

}

<div class="playbuttondiv">
  <a class="playbutton">Jogar</a>
</div>