Sencillo y breve: en el Flexbox margin: auto también centra en la vertical 3.1.15
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
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.
Kseso
the obCSServer ᛯ 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 Kseso
flex-box tiene buen soporte http://caniuse.com/#feat=flexbox
ResponderEliminarno tango vh http://caniuse.com/#feat=viewport-units
se agradece!
Siempre podemos usar el viejo
Eliminar[code]
html {
height: 100%;
}
body {
min-height: 100%;
}
[/code]
:)
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~
EliminarMario, 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