How to Use CSS display:table-cell for Vertical Centering and Advanced Layouts

display:table-cell Property Overview

The

display:table-cell

value makes an element behave like a table cell (

td

), allowing vertical centering with

vertical-align:middle

. It reacts to

padding

but not to

margin

, and should not be combined with

float:left

or

position:absolute

. Elements using this display are sensitive to their height and width.

Key Takeaways

Do not use

float:left

or

position:absolute

together with

display:table-cell

.

It enables vertical centering for elements with variable size.

margin

has no effect;

padding

works.

The element is height‑ and width‑sensitive.

Avoid setting percentage width/height on

display:table-cell

elements.

1. Height‑Independent Vertical Centering (Text)

<code>
<style>
.table-wrap{
  display: table-cell;
  height: 200px;
  width: 100px;
  padding: 20px;
  vertical-align: middle;
  text-align: center;
  border: 1px solid red;
}
</style>
<div class="table-wrap">我是一大推文字，我想要垂直居中，这是省略...</div>
</code>

Setting

display:table-cell

and

vertical-align:middle

centers the text vertically.

2. Multi‑Column Layout for Horizontal Alignment

<code>
<style>
*{margin:0;padding:0;}
.outer{display:table;width:90%;margin:10px auto;padding:10px;border:1px solid green;}
.table-left,.table-right{display:table-cell;width:20%;border:1px solid red;}
.table-center{height:100px;background:green;}
</style>
<div class="outer">
  <div class="table-left"><p>我是左边</p></div>
  <div class="table-center">我是中间</div>
  <div class="table-right"><p>我是右边</p></div>
</div>
</code>

The three table‑cell columns stay horizontally aligned regardless of the padding of each container.

3. Equal‑Height Layout

<code>
<style>
*{margin:0;padding:0;}
.outer{display:table;width:90%;margin:10px auto;padding:10px;border:1px solid green;}
.table-left{display:table-cell;width:150px;padding-top:20px;border:1px solid red;vertical-align:top;text-align:center;}
.table-right{border:1px solid yellow;background:green;margin-left:20px;padding:10px;}
</style>
<div class="outer">
  <div class="table-left"><img src="http://jsfiddle.net/img/[email protected]" alt="logo"></div>
  <div class="table-right">...</div>
</div>
</code>

Both sides keep the same height even when the left side contains an image.

4. Evenly Distributed List Layout

<code>
<style>
*{margin:0;padding:0;}
.table-wrap{display:table;width:80%;margin:20px auto;border:1px solid red;padding:20px;}
.table-wrap li{display:table-cell;padding:20px;border:1px solid green;border-right:none;text-align:center;vertical-align:middle;}
.table-wrap li:last-child{border-right:1px solid green;}
</style>
<ul class="table-wrap">
  <li>001</li><li>002</li><li>003</li><li>004</li><li>005</li>
</ul>
</code>

Using

display:table-cell

on list items automatically distributes equal width without setting explicit percentages.

5. Two‑Column Adaptive Layout

<code>
<style>
*{box-sizing:border-box;}
.content{display:table;border:1px solid #06c;padding:15px 5px;max-width:1000px;margin:10px auto;min-width:320px;width:100%;}
.left-box{float:left;background:green;margin-right:10px;padding-top:5px;}
.right-box{display:table-cell;border:1px solid red;padding:10px;vertical-align:top;}
</style>
<div class="content">
  <div class="left-box"><img src="http://jsfiddle.net/img/[email protected]" alt="logo"></div>
  <div class="right-box">...</div>
</div>
</code>

The left column has a fixed width while the right column automatically fills the remaining space.

6. Peculiar Percentage Width/Height Behavior

When using

display:table-cell

, percentage heights are ignored and depend on content height. Percentage widths work differently depending on whether the parent is a

display:table

element and whether other siblings are present. In many cases, setting a percentage width on a table‑cell can result in a width larger than the calculated percentage.

In all display:table-cell layouts, the vertical-align property is crucial for text alignment.