<table>
<tr>
<td>
This is a centered multiple lines element in a real table layout cell.
</td>
</tr>
</table>
<div class="center-table">
<p>This is a vertically centered multiple lines element in a table layout.</p>
</div>
body {
background: #40BDB7;
font-size: 80%;
}
table {
background: white;
width: 240px;
border-collapse: separate;
margin: 20px;
height: 250px;
border-radius: 5px;
}
table td {
background: black;
color: white;
padding: 20px;
border: 10px solid white;
/* default is vertical-align: middle; */
}
.center-table {
display: table;
height: 250px;
background: white;
width: 240px;
margin: 20px;
}
.center-table p {
display: table-cell;
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.