CSS vertical alignment
An element is CSS centered vertically using display:table and display:table-cell.
HTML code:
<div class="example">
<div class="table">
<div class="table-cell">
<div class="content"></div>
</div>
</div>
</div>
CSS code:
.table {height: 100%; width: 100%; display: table;}
.table-cell {display: table-cell; vertical-align: middle;}
Browser support
- Windows
- Internet Explorer 8.0+
- Firefox 1.0+
- Google Chrome
- Opera 4.0+
- Safari 3.1+
- SeaMonkey 1.0+
- Mozilla 0.6+
- Netscape 6.01+
- Linux
- Firefox 1.0+
- Google Chrome / Chromium
- Opera 5.0+
- SeaMonkey 1.0+
- Mozilla 0.6+
- Netscape 6.01+