CSS button not displaying in correct position in Chrome

[gibbong]

I have the following CSS for a button, but when viewing in Chrome they appear all in the top left corner.

.btn1 {
position: absolute;
top: 150px;
left: 15%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: white;
color: white;
font-family: “Quantico”;
font-size: 24px;
padding: 10px 10px;
cursor: hand;
border-radius: 12px;
text-align: center;
box-shadow: 0 8px 16px 0 rgba(10,0,0,0.2), 0 6px 20px 0 rgba(10,0,0,0.19);

what am I missing, I have tried various webkit and display hacks without success.

[Shikkediel]

You might want to expand on the code (show an example in Codepen or post a link at least). When none of the parents has position: relative, the button will end up at positioned relative to the screen. It seems unlikely to be an isolated Chrome issue based on what’s currently provided.

[Author]

Posts