css display table

CSS的display属性可以用于控制元素的布局方式。其中，display:table可以将元素视为表格，而display:table-cell可以将元素视为表格单元格。

使用display:table和display:table-cell可以实现一些布局效果，比如垂直居中和水平居中。例如，可以通过将父元素设置为display:table，子元素设置为display:table-cell，并配合vertical-align属性实现垂直居中效果。具体代码如下：

.box{
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: table;
}

.box span{
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

<div class="box">
  <span>我是大好人</span>
</div>

这样，子元素会在父元素内垂直居中，并且水平居中显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [基于CSS属性display:table的表格布局的使用](https://blog.csdn.net/weixin_30321449/article/details/99585932)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [CSS display:table](https://blog.csdn.net/Bambi12/article/details/88734525)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]