学会就爱不释手的「布局属性」- display: table-cell

前言： 前端并非大学课程，相信很多前端小伙伴都是自学成才，也正因为如此，往往涉世面不够，再加上繁重的工作内容，让自己没多少时间去挖掘那些好用的属性，天天吮吸手上的三两糖。本文给大家带来一个非常好用的属性，进入正题

---

先露一手： 实现图片在

中水平垂直居中
html结构:

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代码：

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代码：

  

    
大美女一枚 来自上海
    
签名：想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下
    
微博：坐在办公室，只听轰隆隆几声巨响，晴天也能打雷吗？原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了，也不清下场，把路过的汽车震得灰头土脸，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是zha药太水还是房子质量太好？
  

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代码：

  
我和右边等高
  
table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性。说到table-cell的布局，不得不说一下“匿名表格元素创建规则”

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代码：

  

    
A
  
  

    
B
  

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代码：

 

  

    
1
    
2
    
3
    
4
    
5
  

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