display:table和display:table-cell实现单行，多行文本垂直居中

超、凢脫俗 2022-08-28 05:44 102阅读 0赞

今天工作中遇到了一个问题，一个栏目的信息标题有长有短，短的一行，长的两行，但都要求垂直居中，像这样：

![20190311210325101.png][]

![20190311210352953.png][]

一般的思路就是高度等于行高，但是这个仅适用于单行文本，flex布局也只是对元素可以设置垂直居中，不作用于文本。都不适用于像这个例子的，同一位置的不同场景。经过百度的指点，终于找到了比较完美的解决方法，那就是：结合使用display:table和display:table-cell，遂速记之。

<div>
    	<p>
    		hello world <br />
    		hello world <br />
    		hello world <br />
    		hello world
    	</p>
    </div>

body {
    				background: #ccc;
    			}
    			div{
    				display: table;
    				text-align: center;
    				margin: 100px auto;
    				background: #fff;
    			}
    			p{
    				display: table-cell;
    				vertical-align: middle;
    				width: 500px;
    				height: 200px;
    			}

给父元素<div>设置display:table，子元素<p>设置display:table-cell，再加上一个vertical-align:middle（默认情况下，图片，按钮，文字和单元格都可以用vertical-align属性），于是单行多行的文本垂直居中问题就解决了，不论内容有多少，不论行高是多少，总之都会整体垂直居中，像这样：（以下截图皆在chrome浏览器）

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5LiA5p6a_size_20_color_FFFFFF_t_70_g_se_x_16][]

其实这就相当于模拟了table的布局属性，display:table相当于<table>，display:table-cell，就相当于<th><td>，我们不妨来看下<table>，<th>，<td>，在浏览器的默认属性：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5LiA5p6a_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

由上图可以看出，table的默认属性是：display:table，td、th的默认属性是display:table-cell，之所以不使用table标签布局，也是为了适应移动端的自适应布局和div+css的潮流，不过table布局的某些优越性div确实无可比拟（比如在使用数据表格上），为了能尽量做到两全其美，这种table标签的属性就派上了用场。不过给标签加上display:table、display:table-cell 和 table标签、th td标签本身还是有区别的，这就是浏览器对标签解析的默认属性上：

再仔细看上图，table除了有display:table，还有其他3个属性，而th，td也还有vertical-align:inherit属性。th，td的垂直对其方式默认是从父元素继承，接着看下图：  
![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5LiA5p6a_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

th、td父元素是<tr>，<tr>也是从父元素继承，再往上则是tbody（table布局浏览器都会自动生成这个标签），而tbody的默认vertical-align是middle（这个我在IE和Firefox都得到了认证），所以当我们给其他标签加上display:table-cell时，并没有这个属性，所以上文为了使文本垂直居中，需要我们手动加上vertical-align:middle。

页面布局看似简单，但想有真正的深入理解，还要下很多的功夫呢。知道的越多越是感觉自己无知。

[20190311210325101.png]: /images/20220828/44db97b2df4e4bbabde1e561e98d3c0c.png
[20190311210352953.png]: https://img-blog.csdnimg.cn/20190311210352953.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5LiA5p6a_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/49752729fd9a499390bdfdc11effa110.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5LiA5p6a,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5LiA5p6a_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/4c96e790496a42699bc43749ae001582.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5LiA5p6a,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5LiA5p6a_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/5bf9471c8b54438c9570d677cc4caad5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5LiA5p6a,size_20,color_FFFFFF,t_70,g_se,x_16