Centrado en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en centrado - centered en CSS3.
Background:display, calc(), flex
"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.
display: flex+ margin: auto sin límite de ancho y alto
<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
display: grid no limit to width & height
<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


<a onclick=Tutoriales En Linea" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-03-11
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!