Concettualmente, le regole CSS vengono applicate agli elementi di un documento nell'ordine in cui appaiono nell'HTML, vale a dire in un traversal di preordine della struttura DOM. Storicamente, questo era così che il CSS poteva essere applicato come il documento veniva caricato, ma anche con HTML dinamico e CSS dinamico, ci sono vantaggi di prestazioni per essere in grado di applicare il CSS in un unico passaggio.
Ecco perché il CSS non ha selettori per "una A seguita da una B" o "una A che contiene una B", mentre è possibile dire "una A preceduta da una B" o "una A contenuta all'interno di una B ", perché in quest'ultimo caso, A precede B in un attraversamento preordinato.
verticale centratura è difficile perché al momento della CSS per l'elemento figlio (l'elemento di essere centrato) viene elaborato, le altezze degli elementi principali e secondari (i due valori necessari per calcolare l'offset dell'elemento figlio all'inizio) non sono noti, poiché entrambi dipendono da elementi che non sono ancora stati elaborati.
La dipendenza dall'altezza dell'elemento padre viene superata dal posizionamento assoluto: top: 50%. In questo modo si rimuove in modo efficace il calcolo dell'offset verticale fino a quando l'altezza dell'elemento padre è nota.
Analogamente, le trasformazioni CSS3 possono tenere conto dell'altezza del bambino: transform: translateY(-50%). Prima del CSS3, era comune usare invece lo margin-top negativo, ma era necessario impostare un'altezza fissa sull'elemento figlio.
Suppongo che sia perché il browser può facilmente conoscere la larghezza della pagina, ma la lunghezza cambia in base al contenuto. – imgx64
Questo è ciò che intendo con gli algoritmi - la larghezza potrebbe anche essere modificata dinamicamente, ma i CSS mantengono il passo. Perché non per le modifiche verticali? – Ben