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!
html css div
Commentami!