I have this button on my page that is currently aligned to the left side of my screen but I want it to be in the middle. What would be the proper way to achieve this?
html
<button class="button">Button</button> css
.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } Add a wrapper with text-align: center; and position the button to place it in center:
.wrapper { text-align: center; } .button { position: absolute; top: 50%; background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }<div class="wrapper"> <button class="button">Button</button> </div>
position: absolute; brakes the horizontal centering (jsfiddle.net/p1ztx2ga) if you remove it (jsfiddle.net/p1ztx2ga/1) then it's at least centered horizontally. In short position:absolute; does not work nicely with text-align: center;you have to put button in div
<div style="width:100%; text-align:center;"> <button class="button">Button</button> <div> You can check here Demo
Using CSS3 these days should be the way to go. With this also the size of the element (button) does not matter.
.button { /* THE MAGIC */ position: absolute; left: 50%; transform: translateX(-50%); /* YOUR STYLINGS FROM QUESTION */ background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }<button class="button">Button</button>If you want to center both horizontally and vertically it's almost the same
.button { /* THE MAGIC */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* YOUR STYLINGS FROM QUESTION */ background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }<button class="button">Button</button>
position: absolute; left: 50%; transform: translateX(-50%); not really so much.
text-align:center; display: inline-blockon his parent. You should share all relevant code for your problem