概述
之前工作中碰到了一个垂直居中问题，最后通过查资料利用table-cell解决。于是打算总结一下有关table-cell的应用，记录下来，供以后开发时参考，相信对其他人也有用。
参考资料：
一行或多行文字垂直居中
比如有这样一个需求：框内的文字水平居中，垂直居中，并且当文字很多时，自动变成多行，并且变成多行后仍然是水平居中，垂直居中的。
一般情况下，我们可以用以下代码来实现：
Document 我的字很少我是很多行很多字
但是如果我们需要父容器是块级元素，或者父容器浮动，那么用上面的办法就不行了，这个时候可以用display: table来实现，比如下面的代码：
Document 我的字很少我是很多行很多字
另外需要注意的是，如果里面的文字是一串很长的单词，那么有可能会超出父容器的宽度，这个时候需要添加word-break: break-all;来实现了。
左边宽度固定，右边宽度自适应
有这样一个需求：父元素宽度不定，它有2个子元素，子元素在同一行，左边的子元素宽度固定，右边的子元素宽度自适应。
这里左边的子元素肯定会用浮动，如果右边的元素设置display: block;的话，右边的子元素会包括左边的子元素。但是如果设置display: table-cell的话，就不会了，如下面的代码所示：
Document 
大美女一枚 来自上海
签名：想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下。
微博：坐在办公室，只听轰隆隆几声巨响，晴天也能打雷吗？原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了，也不清下场，把路过的汽车震得灰头土脸，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是乍药太水还是房子质量太好？
值得一提的是，bootstrap里面的输入框组input-group就用到了这种布局。
其它
table-cell还可以实现很多其它布局，但是那些布局不用table-cell一样也可以实现，所以我这里就不一一列出来了。