display: table 会将元素当作块级表格来显示,表格前后有换行符,类似<table>标签;
display: table-ceil 会将元素看作表格单元格来显示
效果图:
代码:
<div class="parent">
<p class="son">display 的table和table-ceil一般情况下用的不多,但他俩联合起来效果很惊喜。比如:让这里的多行文字垂直居中。虽然,用line-height=height;块级元素垂直居中,position定位或者flex布局都可以。但这里使用table和table-ceil来实现
</p>
</div>
<style>
.parent{
display: table;
width: 300px;
height: 400px;
text-align: center;
}
.son{
display: table-cell;
width: 100px;
height: 200px;