html - texto - Metafísica CSS: ¿POR QUÉ es tan difícil la alineación vertical de la página?
centrar texto verticalmente html (2)
Con respecto a la página, la alineación horizontal en CSS es fácil: un margin:0 auto te lleva la mayor parte del tiempo y un text-align:center para otros casos.
Mi pregunta a los gurús no es cómo alinear verticalmente, pero ¿por qué es tanto más difícil? ¿Por qué no hay margin:auto 0 ? Quiero decir, desde una perspectiva de programación.
Teóricamente, parece que los mismos algoritmos se aplicarían a ambos tipos de centrado.
Buena pregunta y no sé, pero sospecho que la raíz del problema radicará en HTML y, por lo tanto, los motores de renderizado están destinados originalmente a la semántica de documentos en lugar de la semántica de diseño / impresión. CSS es excepcionalmente bueno para describir párrafos, encabezados y toda clase de problemas con los documentos, y es muy débil cuando se trata de las tareas de diseño de DTP más grandes que ahora todos quieren que sean sus sitios web.
En pocas palabras: creo que el problema es que a HTML se le asignan tareas para las que no estaba destinado. Quel sorpresa.
Conceptualmente, las reglas de CSS se aplican a los elementos de un documento en el orden en que aparecen en el HTML, es decir, en un recorrido de preorden del árbol DOM. Históricamente, esto era para que el CSS se pudiera aplicar a medida que se cargaba el documento, pero incluso con HTML dinámico y CSS dinámico, existen ventajas de rendimiento para poder aplicar el CSS en una sola pasada.
Esta es la razón por la cual CSS no tiene selectores para "una A seguida de una B" o "una A que contiene una B", mientras que es posible decir "una A precedida por una B" o "una A contenida dentro de una B", porque en los últimos casos, A precede a B en un recorrido previo al pedido.
El centrado vertical es difícil porque en el momento en que se procesa el CSS para el elemento hijo (el elemento que se va a centrar), las alturas de los elementos padre e hijo (los dos valores necesarios para calcular el desplazamiento superior del elemento hijo) no se conocen , ya que ambos dependen de elementos que aún no se han procesado.
La dependencia de la altura del elemento principal se supera mediante un posicionamiento absoluto: top: 50% . Esto efectivamente difiere el cálculo del desplazamiento vertical hasta que se conozca la altura del elemento principal.
Del mismo modo, las transformaciones CSS3 pueden representar la altura del elemento secundario: transform: translateY(-50%) . Antes de CSS3, era común usar margin-top negativo margin-top lugar, pero eso requería establecer una altura fija en el elemento secundario.