Se puede solucionar de varias formas, te dejo a continuación 2 de las que considero más utiles.
1ª Forma:
Se aplica un margen por la izquierda del 50% (Medida que se aplica sobre el contenedor), después se translada el botón hacia la izquierda el 50% de si mismo (como si quitasemos la mitad de su logitud), es decir:
Margen de 50% por la izquierda del botón.
Translación hacia la izquierda del botón el 50% de si mismo.
2ª Forma:
Con flexbox, se calcula el centro del contenedor y del elemento, y se translada el elemento de tal forma que ambos centros coincidan (todo ello de forma transparente al desarrollador), simplemente utilizando las propiedades adecuadas.
Código:
Aquí dejo el código de ambos métodos.
div.contenedor {
width: 33.33%;
background-color: tomato
}
button.centrado {
width: 110px; /* Para que no se rompa en dos líneas, y lo translade tal cual. */
margin-left: 50%;
transform: translateX(-50%);
}
/* OTRA FORMA (flex):
div.contenedor {
width: 33.33%;
background-color: tomato;
display: flex;
justify-content: center
}
*/
<div class="contenedor">
<button class="centrado">Boton centrado</button>
</div>