Puedes utilizar flexbox y la propiedad justify-content: center
para tu clase .row
.
.row{
display: flex;
justify-content: center;
}
De esta manera cada uno de los elementos estará centrado horizontalmente dentro de sus correspondientes líneas.
Explicación de porque unos elementos se centran y otros no con text-center
En tu caso, los botones (que en este caso son inputs
en realidad) se están centrando con la propiedad text-center
porque son elementos inline
y esta propiedad solo funciona para los elementos inline
o inline-block
. Por lo tanto, como los div
por defecto son elementos que actúan como bloque (block
), no se van a centrar con esta propiedad.