值描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。inline默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block行内块元素。（CSS2.1 新增的值）list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。markerCSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。table此元素会作为块级表格来显示（类似 table），表格前后带有换行符。inline-table此元素会作为内联表格来显示（类似 table），表格前后没有换行符。table-row-group此元素会作为一个或多个行的分组来显示（类似 tbody）。table-header-group此元素会作为一个或多个行的分组来显示（类似 thead）。table-footer-group此元素会作为一个或多个行的分组来显示（类似 tfoot）。table-row此元素会作为一个表格行显示（类似 tr）。table-column-group此元素会作为一个或多个列的分组来显示（类似 colgroup）。table-column此元素会作为一个单元格列显示（类似 col）table-cell此元素会作为一个表格单元格显示（类似 td 和 th）table-caption此元素会作为一个表格标题显示（类似 caption）inherit规定应该从父元素继承 display 属性的值。

display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！

当两个或者两个以上标签一起使用显示在同一行时，以前常用的是float、position进行布局，在高版本的浏览器可以使用flex、grid进行布局。无意中发现使用display:table-cell也是一个很好用的自适应布局，本文就display：table-cell做学习总结。

display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。

display：table-cell可以代替浮动布局，但是其不是最好的方法。其他方法有待进一步学习！

这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居中的。虽然感觉用的不多，但是在某些时候还是挺管用的，如下：

效果如下：

设置了display：table-cell的元素：

对宽度高度敏感对margin值无反应响应padding属性内容溢出时会自动撑开父元素

效果如下:

!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titletable/titlestyle.content { display: tablecell; padding: 10px; border: 2px solid #999;} .content div { display: inlineblock; verticalalign: middle;}/style/headbodydiv class=contentdiv style=padding: 50px 40px;background: #cccccc;color: #fff;/divdiv style=padding: 60px 40px;background: #639146;color: #fff;/divdiv style=padding: 70px 40px;background: #2B82EE;color: #fff;/divdiv style=padding: 80px 40px;background: #F57900;color: #fff;/divdiv style=padding: 90px 40px;background: #BC1D49;color: #fff;/div/div/body/html

效果如下：

!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titletable/titlestyle.content { display: table; padding: 10px; border: 2px solid #999; width:20%;}.leftbox {float: left; marginright: 10px;}.rightbox { display: tablecell; padding: 10px; width: 3000px; /*右侧自适应*/ verticalalign: top; border: 1px solid #ccc;}/style/headbodydiv class=contentdiv class=left-boximg src= width=70/divdiv class=right-box/div/div/body/html

效果如下：

左边头像部分使用了float左浮动属性，右侧使用 display: table-cell则实现了两列自适应布局。

注：我们为一个元素设置了display：table-cell属性，而不将其父元素设置为display：table-row属性，浏览器会默认创建一个表格行。

!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titletable/titlestyle.content { padding: 10px; margin: 10px auto; display: table; width: 20%; border: 2px solid #999;} .content ul { display: tablerow;} .content ul li { display: tablecell; height: 100px; lineheight: 100px; textalign: center; border: 1px solid #ccc;}/style/headbodydiv class=contentulli1/lili2/lili3/lili4/lili5/li/ul/div/body/html

效果如下：

这类布局常用浮动布局（给每个li加上float：left属性）实现，但这样做有明显不足：

需要清除浮动不支持不定高列表的浮动

display:table-cell属性介绍与使用   https://cdnanqi.cn/wangluoyingxiao/17045.html