Align text vertically to center using HTML and CSS
You might think that while horizontal centering is easy with both HTML and CSS then vertical centering should be too. Wrong! Centering elements vertically can be a lot of trouble. Especially when it's the first time for you.
Using divisions as table and table-cell
You can use two divisions to make an element centered vertically. The first division you need to make has to have a display set to table. And the second division within the first division must have the display set to table-cell. By doing that you are basically mimicking the good old HTML table structure.
<div style="display: table; width: 100%; height:200px; text-align: center; background-color: #e6e6e6">
<div style="display: table-cell; width: 100%; height:100%; vertical-align: middle;">
<h1>Vertically centered text</h1>
</div>
</div>
The result of table and table-cell divisions
Vertically centered text
The old method of using HTML tables
I know, no one likes to use tables anymore. But using table to center things vertically is really easy. You just have to set table cells valign attribute to center and it's done.
<table width="100%" height="200px" border="0" cellpadding="0" cellspacing="0" bgcolor="#e6e6e6">
<tr>
<td valign="center" align="center">
<h1>Vertically centered text</h1>
</td>
</tr>
</table>
And the result of HTML table
Vertically centered text |
Last update: 2019-01-21 (Y,M,D)
