CSS: come centrare verticalmente un div

Mattepuffo's logo
CSS: come centrare verticalmente un div

CSS: come centrare verticalmente un div

Centrare orizzontalmente un div è facile, in quanto basta usare i margin:auto a sinistra e destra.

Centrarlo verticalmente può essere un pò più complicato.

Oggi vediamo una possibile soluzione, considerando che non penso funzioni con le vecchie versioni di IE (ma sinceramente a me non interessa!).

Vi posto direttamente tutto l'HTML e il CSS:

<!DOCTYPE html>
<html>
    <head>
        <title>Div centrato verticalmente</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body { margin: 0;padding: 0;width: 100%;height: 100%; }
            .outer { display: table;position: absolute;height: 100%;width: 100%; }
            .middle { display: table-cell;vertical-align: middle; }
            .inner { margin-left: auto;margin-right: auto; width: 600px;border: 1px solid black; }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="middle">
                <div class="inner">
                    <h1>Div centrato verticalmente!</h1>
                    <p>Qui scrivete quello che volete!!</p>
                </div>
            </div>
        </div>
    </body>
</html>

Questo è il minimo sindacale.

Fate qualche prova da voi per capire meglio.

Enjoy!


Condividi

Commentami!