Centrado en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en centrado - centered en CSS3.
Hace 44 años pusimos a un hombre en la luna, pero todavía no podemos centrar verticalmente las cosas en CSS —James Anderson.

Todas las prácticas mencionadas en la siguiente parte, lo he experimentado en mi propio proyecto. Esas prácticas tienen tanto ventajas como desventajas. Ustedes pueden elegir la solución más adecuada según su preferencia.

<style>
  main{
    width: 100%;
    min-height: 152px;
    display: flex;
  }
  main > span {
    background: #b4a078;
    color: white;
    margin: auto;
    padding: .3em 1em .5em;
    border-radius: 3px;
    box-shadow: 0 0 .5em #b4a078;
  }
</style>

<main>
    <span>¡Centro, por favor!</span>
</main>

Ver resultado

<style>
  main{
    width: 100%;
    min-height: 152px;
    display: grid;
    justify-content: center;
    align-items: center;
  }
  main > span {
    background: #b4a078;
    color: white;
    padding: .3em 1em .5em;
    border-radius: 3px;
    box-shadow: 0 0 .5em #b4a078;
  }
</style>

<main>
    <span>¡Centro, por favor!</span>
</main>

Ver resultado