El Misterio de Centrar enVertical

María Evangelina Ferreira

¡Hola!

4 años enseñando...

Alice

Lo tenemos asumido

Las cosas simples pueden resultar complejas

Alice
Suffer but happy

Descripción gráfica de Front-End.

Esto pasa en todos los lenguajes

Todos tienen inconsistencias

JavaScript

Los meses empiezan en 0

¯\_(ツ)_/¯

¿Por qué?

stackoverflow js
stackoverflow js
stackoverflow js
stackoverflow js

¡CSS no es la excepción!

¡Hasta se disculpan!

css wg sorry
css wg sorry
css wg sorry
css wg sorry
css wg sorry
css wg sorry
css wg sorry
css wg sorry
css wg sorry

CSS nunca se llevó bien con la verticalidad

Vertical fail 1

Vertical fail 2

cat falling
cat falling

Lo tentador del vertical-align

Vertical ok

¿Cómo centramos?

¿Cómo centramos?

  1. Frames
  2. Tables
  3. Divs
    • display: table;

Pregunta incorrecta.

¿Qué centramos?

¿Qué centramos?

Y además...

¿Qué centramos?

¿Qué centramos?

¿Qué centramos?

No es fácil.

Horizontal

Horizontal Línea

Horizontal Línea

Horizontal Línea

Horizontal Bloque

Horizontal Bloque

Estático / Dinámico

En horizontal es casi indistinto

Horizontal

Vertical no es lo mismo

Soluciones posibles

Para los textos

Alto de línea

Padding

Soluciones posibles

Para elementos de bloque

Estático

20vh + 20vh + 60vh = 100%

Ver demo

Tamaños de fuente con calc()

font-size: calc(16px + 1.7vh);

Dinámico

Ver demo

Padres e hijos

.padre{
      position: relative;
}
.hijo {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
}

Padres e hijos

centrar 50%

Dinámico 100% 100%

Ver demo

Eso es un hack.

IE 9+

Pregunta:

¿Quiénes de ustedes ofrecen
(los obligan)
soporte para IE?

jenga ie

Flexbox

IE 10+

flexbox can i use

Flexbox

.padre{
      display: flex;
      flex-direction: column;
      justify-content: center;
}

Flexbox

Ver demo

Flexbox

Conclusión

Sí, podemos.

CSS sabe centrar cosas.

Flexbox es la respuesta.

Empezando con flexbox

Flex Froggy
flexbox froggy

¡Gracias!

/