HOW TO | 3D | CODE | GAMING | PHOTO | SOUND | VECTOR | VIDEO

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)