Div horizontális és vertikális középre igazítása

Div horizontális középre igazítása

Horizontális középre igazítás csak akkor lehetséges, ha megadjuk az elem szélességét. Ezt általában akkor használjuk, ha az egész weboldalt szeretnénk középre igazítani.

<div id="wrap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>

#wrap {
width: 700px;
margin: 0 auto;
}

Div horizontális és vertikális középre igazítása

Ennél a módszernél a szélesség mellett az elem magasságát is meg kell adnunk.

<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>

#content {
position: absolute;
width: 500px;
height: 400px;
top: 50%;
left: 50%;
margin-left: -250px; /* mindig a szélesség felét kell megadni */
margin-top: -200px; /* mindig a magasság felét kell megadni */
}