Światełko w tunelu

Zacznijmy od początku. Za element, który będziemy pozycjonować, odpowiada kod:

<div id="box">This is the box.</div>

Powininen on znajdować się wewnątrz znacznika body. Nadanie identyfikatora id="box" możemy pominąć tylko w przypadku, gdy w dokumencie znajdować się będzie dokładnie jeden element div. To tyle, jeśli chodzi o HTML.

Przejdźmy do arkusza stylów. Na początek, dla świętego spokoju, zresetujmy margines (margin) i dopełnienie (padding) dla body, ustawiając dla nich wartość 0.

Nasz wycinek będzie miał wymiary 200x70 pikseli, co naturalnie definiujemy w arkuszu. Będziemy pozycjonować absolutnie, więc dla #box musimy ustawić ujemne marginesy. Lewy margines to ujemna wartość, będąca połową szerokości; górny - analogicznie, czyli połową wysokości. Otrzymujemy zatem:

div#box {
   width: 200px;
   height: 70px;
   margin-left: -100px;
   margin-top: -35px;
}

Zostało tylko właściwe centrowanie. Ta czynność jest już banalnie prosta - do stylów naszego #box dorzucamy:

   position: absolute;
   left: 50%;
   top: 50%;

Teoretycznie to już koniec, ale wypadałoby zadbać o względy estetyczne Zwykle najbardziej praktyczne będzie ustawienie text-align: center; dla wycinka. Jeśli blok posiada tylko jedną linię tekstu, warto ustawić line-height o wartości równej wysokości bloku (w naszym przypadku 70px). Wtedy tekst pojawi się dokładnie pośroku centrowanego elementu.

Voila!