Anders, september 2018.

Anders är en webbutvecklare och hårdrockare som gillar brädspel, kaffe och öl.

Detta är ett arkiverat inlägg, som importerats hit för referens. Det kan se konstigt ut och innehålla utdaterad information eller inaktuella åsikter.

vertikal centrering med CSS, anno 2009

En av mina populäraste sidor enligt google är min utvärdering av vertikal centrering med CSS. Jag har sedan en tid känt att det inlägget inte är riktigt komplett, då det saknas handfast kod på hur det praktiskt går till att skapa vertikal centrering för alla webbläsare, till och med IE6. Nyfikna läsare måste läsa hela min text och klicka sig vidare i en länk längst ner, och gissa sig fram till koden. Inte så schysst. Istället för att uppdatera inlägget kompletterar jag med ett nytt, som visar hur en praktisk CSS-klass valignfix skapas, men också hur CSS-koden kan användas på enstaka element.

HTML-kod att utgå från

Min följande CSS-kod utgår från en HTML-kod, bara för att visa ett exempel.

<div class="valignfix">
        <div>
                <div>
                        <h1>Vertikalt centrerad</h1>
                        <h2>Jag ligger minsann i mitten!</h2>
                </div>
        </div>
        <img src="matterhorn.jpg" alt="Matternhorn, ett högt berg">
</div>

HTML-koden ser ut så baserat på en rad förutsättningar och beslut baserade på god semantik och skalbarhet.

CSS-tabeller sätter hjulet i rullning

För alla moderna webbläsare finns ett utbrett och redan beprövat stöd för CSS-tabeller. Genom att använda display:table och display:table-cell är vi mer än halvvägs.

*.valign {
        display:table-row;
}
        *.valign > * {
                width:50%;
                display:table-cell;
                vertical-align:middle;
        }

Ovanstående lösning är fullt tillräcklig för Internet Explorer 8+, Firefox 2+, Opera 8+ och Safari 2+. Vi har de roliga kvar: IE7 och IE6.

IE7 och IE6 löser det med positionering

Vid utvecklingen av IE7 prioriterade Microsoft upp CSS2 selektorer och allvarliga renderingsbuggar, men stödet för CSS-tabeller uteblev. Med hjälp av ett CSS filter för de båda webbläsarna går det att göra en liknande lösning med en blandning av absolut och relativ positionering. Både IE6 och IE7 fungerar med stjärna HTML hacket, den osynliga wrappern kring <html>.

* html *.valign,
*+html *.valign {
        position:relative;
        overflow:auto;
}
        * html *.valign div,
        *+html *.valign div {
                position:absolute;
                top:50%;
        }
                * html *.valign div div,
                *+html *.valign div div {
                        position:relative;
                        top:-50%;
                }
                        * html *.valign div div *,
                        *+html *.valign div div * {
                                position:static;
                                top:0;
                        }
        /* gör bilden eller annat högt element till float. */
        * html *.valign img,
        *+html *.valign img {
                float:right;
        }

Det linkar, men är inte identisk

Värt att ha i åtanke är att lösningen för IE7 och IE6 är inte fullt så användbar och skalbar som CSS tables.

Det täpper likväl igen hålen i de flesta fall där vertikal centrering är önskvärt. Koden validerar och kan säkert användas i samma CSS-fil, även om jag personligen föredrar att gömma IE-kod i en egen CSS-fil som infogas via Conditional Comments Den är framtidssäker, då använt CSS filter upphör att fungera fr o m IE8 där CSS tables fungerar korrekt.

Och där har vi det. En ren CSS-lösning för vertikal centrering. Ta en titt i exempelfilen för att se resultatet. Jag har en rikligt dokumenterad version och en kompakt version för produktion att ta del av vid intresse!