diff --git a/source/_posts/前端杂烩/table-cell应用.md b/source/_posts/前端杂烩/table-cell应用.md
new file mode 100644
index 0000000..9028254
--- /dev/null
+++ b/source/_posts/前端杂烩/table-cell应用.md
@@ -0,0 +1,115 @@
+---
+title: table-cell应用
+date: 2018-6-15 09:23:57
+tags:
+ - 前端
+ - css
+categories:
+ - 前端杂烩
+---
+
+`table-cell`元素让该元素以表格单元格的形式呈现，类似于td标签
+单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等
+
+> table-cell并不是必须和`table`父元素配套使用 , 但是通常习惯于这样做
+
+
+table-cell会被某些css样式破坏 , 比如float 绝对定位
+对`width height padding`**有反应** , 对`margin`**无反应**
+```css
+.box {
+ display:table;
+}
+.box > .child {
+ display:table-cell;
+ background-color:pink;
+ padding:3px;
+ width:200px;
+ height:50px;
+ margin:6px; /* 不生效 */
+}
+```
+
+### 应用场景
+#### 多行文字垂直居中
+单行文字的居中十分简单, line-height与父元素的高度相同即可
+```css
+.box {
+ height: 50px;
+ line-height: 50px;
+}
+```
+> 这里准确地说应该是文字或者全部为内联元素均在一行内
+
+但是如果其中的文字可能有多行并且行数不确定 , 这种办法就不可行了
+使用table-cell配合`vertical-align: middle`就可以很方便做到
+```html
+
+```
+
+```css
+.box > .child {
+ display:table-cell;
+ vertical-align: middle;
+ text-align:center;
+ border: 1px solid red;
+ padding:3px;
+ width:200px;
+ height:80px;
+}
+```
+
+当然水平居中和单行没什么差别 , 都是`text-align:center`
+
+#### 多列等高布局
+对于多列布局 , 当然存在很多的实现方法
+但是如果想要让所有列的高度适应于内容最高的一列的高度
+源于表格当中 **td** 的特性
+使用table-cell实现起来就更为方便
+```html
+
+
我是单行文字
+
+
+
我是多行文字
+
我是多行文字
+
我是多行文字
+
我是多行文字
+
+