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
{PAGEBREAK}

absolute-positioned position: absolute limit the width & height

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

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

Ver resultado

absolute-positioned position: absolute + calc() limit the width & height

<style>
  main{
    width: 100%;
    min-height: 152px;
    display: flex;
  }
  main > span {
    position: absolute;
    top: calc(50% - 16px); 
    left: calc(50% - 72px);
    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
{PAGEBREAK}

absolute-positioned position: absolute + translate no limit to width & height

<style>
  main{
    width: 100%;
    min-height: 152px;
    display: flex;
  }
  main > span {
    position: absolute;
    top: 50%; left: 50%;
    background: #b4a078;
    color: white;
    padding: .3em 1em .5em;
    border-radius: 3px;
    box-shadow: 0 0 .5em #b4a078;
    transform: translate(-50%, -50%);
  }
</style>

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

Ver resultado

table-like layout display: table/table-cell + vertical-align: middle no limit to width & height

<style>
  main {
    width: 100%;
    height: 152px;
    display: table;
  }
  main > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  main > div > span {
    width: 50%;
    background: #b4a078;
    color: white;
    padding: .3em 1em .5em;
    border-radius: 3px;
    box-shadow: 0 0 .5em #b4a078;
  }
</style>

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

Ver resultado
{PAGEBREAK}

pseudo-elements :after + vertical-align:middle no limit to width & height

<style>
  main {
    width: 100%;
    height: 152px;
    text-align: center;
  }
  main::after {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  main > span {
    /* display: inline-block;
    vertical-align: middle; */
    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

Centrado en CSS3

Artículos Relacionados