前言： 前端并非大学课程，相信很多前端小伙伴都是自学成才，也正因为如此，往往涉世面不够，再加上繁重的工作内容，让自己没多少时间去挖掘那些好用的属性，天天吮吸手上的三两糖。本文给大家带来一个非常好用的属性，进入正题
先露一手： 实现图片在<div>中水平垂直居中
html结构:
<body>
<div>
<img >
</div>
</body>
css样式:
*{ margin: 0px; padding: 0px; }
div {
width: 150px;
height: 150px;
display: table-cell;
vertical-align: middle;
text-align: center;
background: black;
}
div img {
width: 50px;
height: 50px;
}
显示效果：
图片居中
理解
display: table-cell属性让元素以表格单元格的形式呈现，使元素类似于td标签，ie8+以及现在的主流浏览器 Chrome、Firefox、Safari 和 Opera 都支持该属性。值得注意的是，该属性与position/float等存在冲突，会破坏其效果，应尽量避免布局属性的共用。
display: table-cell属性特点:
- 同行等高
- 宽度自动调节
使用了display: table-cell属性的元素:
- 对高度敏感
- 不响应
margin，但响应padding； 如果要用margin，可以再包裹一层元素 - 内容溢出会撑开父元素
使用
1. 不同元素全居中用法
效果展示：
html代码：
<div class="content">
<div style="padding: 50px 40px;background: #cccccc; color: #fff;"></div>
<div style="padding: 60px 40px;background: #639146; color: #fff;"></div>
<div style="padding: 70px 40px;background: #2B82EE; color: #fff;"></div>
<div style="padding: 80px 40px;background: #F57900; color: #fff;"></div>
<div style="padding: 90px 40px;background: #BC1D49; color: #fff;"></div>
</div>
css代码：
.content {
display: table-cell;
padding: 10px;
border: 2px solid #999;
}
.content div {
display: inline-block;
vertical-align: middle;
}
dispaly: table-cell 加上 vertical-align 使得不同高度的元素都垂直居中，其中，div的display: inline-block 使得几个div显示在同一行上。
2. 两列自适应布局
实现效果：
html代码：
<div class="content">
<div class="left-box'></div>
<div class="right-box">
<p><a href="">大美女一枚</a> 来自上海</p>
<p>签名：想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下</p>
<p>微博：坐在办公室，只听轰隆隆几声巨响，晴天也能打雷吗？原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了，也不清下场，把路过的汽车震得灰头土脸，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是zha药太水还是房子质量太好？</p>
</div>
</div>
css代码
.content {
display: table-cell;
padding: 10px;
border: 2px solid gray;
}
.left-box {
float: left;
margin-right: 10px;
}
.right-box {
display: table-cell;
*display:inline-block;
padding: 10px;
width: 2000px;
vertical-align: top;
border: 1px solid #aaa;
}
说明: left-box头像部分使用左浮动，距离右侧10个像素，左侧利用display：table-cell实现两列自适应布局，很简单的代码，很神奇的效果。width: 2000px的有关解释如下：
display:table-cell元素生成的匿名table默认table-layout:auto。宽度将基于单元格内容自动调整。当内容足够多将宽度完全撑开时，再让某个元素（例如关闭按钮）右侧定位就会有问题。当前屏幕居多为1920，设置2000是设置了一个比1920更大的值以有足够空间自适应屏幕大小拉动
hack先知
匿名表格元素创建规则：
CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。
也就是说，我们为一个元素设置了**display：table-cell**属性，而不将其父元素设置为**display：table-row**属性，浏览器会默认创建一个表格行。可参考支付宝UED的基于display:table的CSS布局一文！
3. 等高布局
实现等高布局，毫无疑问，display:table-cell是首选，但是考虑到匿名创建表格元素的问题，所有table-cell元素外一定要留有一个用来包裹的标签
实现效果：
html代码：
<div class="content">
<div class="left-part">我和右边等高</div>
<div class="right-part">table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性。说到table-cell的布局，不得不说一下“匿名表格元素创建规则”</div>
</div>
css代码：
.content {
display: table;
padding: 10px;
border: 2px solid #888;
}
.left-part {
display: table-cell;
width: 100px;
border: 1px solid #bbb;
}
.right-part {
display: table-cell;
border: 1px solid #bbb;
}
4. 与inline-block 配合使用
html代码：
<div class="content">
<div class="left">
<div class="box">A</div>
</div>
<div class="right">
<div class="box">B</div>
</div>
</div>
css代码：
.content {
display: table;
padding: 10px;
margin: 10px auto;
width: 1000px;
border: 2px solid #999;
}
.left {
display: table-cell;
text-align: left;
border: 1px solid #0cf;
}
.right {
display: table-cell;
text-align: right;
border: 1px solid #fc0;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
说明： A、B 元素都设置了display: table-cell，所以它们均匀占据设置了display: tabled的div元素。.box 设置 display 属性为 inline-block，是为了让它们响应text-align属性的设置
dispaly:table-cell不响应margin属性，但inline-block对宽高margin设定是有效的，参与行内格式化上下文，在行内对齐时使用它自己的框底边为基线对齐位置
5. 列表布局
html代码：
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
css代码：
* {margin: 0px; padding: 0px}
.content {
padding: 10px;
margin: 10px auto;
border: 1px solid #888;
}
.content ul {
display: table;
width: 100%;
}
.content ul li {
display: table-cell;
height: 100px;
line-height: 100px;
text-align: center;
border: solid 1px #ddd;
}
说明： 这种情况一般使用float来解决，给每一个 li 增加 float: left 属性，但这样做有明显的不足：
- 清除浮动
- 不支持不定高的列表浮动
先介绍到这里。如果还迷惑，可以参考文献
我所知道的几种display:table-cell的应用
参考
布局神器display:table-cell
网友评论