soy Kseso y esto EsCSS

Sencillo y breve: en el Flexbox margin: auto también centra en la vertical

Doble centrado, en x e y, con margin: auto; en el flexbox

Sencillo y breve: en el Flexbox margin: auto también centra en la vertical

xPor Kseso ✎ 3
En el Flexbox margin: auto también centra en la vertical

Por un tuit de @LeaVerou me llega esta nueva forma de conseguir el doble centrado, tanto en horizontal como vertical.

Sencillo y, a estas alturas, práctico totalmente. Posíblemente la forma más simple y que menos código necesita de todas las formas posibles de lograr el doble centrado.

body { display: flex; min-height: 100vh; margin: 0; } h1 { margin: auto; }

Sólo este Css basta:

See the Pen doueble centered with margin: auto; on flex by Kseso (@Kseso) on CodePen.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 3

  1. flex-box tiene buen soporte http://caniuse.com/#feat=flexbox
    no tango vh http://caniuse.com/#feat=viewport-units
    se agradece!

    ResponderEliminar
    Respuestas
    1. Siempre podemos usar el viejo

      [code]
      html {
      height: 100%;
      }
      body {
      min-height: 100%;
      }
      [/code]

      :)

      Eliminar
    2. Que además y ya vestidos de arqueonavengadorentólogos, Furoya, se te pasó añadir que si añades height: 100%; al body el añorado IE6 lo tomará como min-height xD :-D~

      Mario, las deficiencias al soporte de las unidades relativas al viewport por los IE són sólo a la nomenclatura de vmin que lo implementa como vm y alguna otra cosilla (creo recordar).

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap