display水平垂直居中

要实现display属性的水平垂直居中，可以使用table-cell方式。首先，将父容器设置为display: table，并设置其宽度和高度。然后，将子元素设置为display: table-cell，并使用vertical-align: middle将其垂直居中。如果子元素是块级元素，可以使用margin: auto将其水平居中。如果子元素是行内元素，可以给父容器设置text-align: center使其水平居中。具体的代码如下：

<style>
.father {
  display: table;
  width: 400px;
  height: 200px;
}

.son {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* 当子元素为行内元素时，使用text-align: center实现水平居中 */
}

.block {
  margin: auto; /* 当子元素为块级元素时，使用margin: auto实现水平居中 */
}
</style>

<div class="father">
  <span class="son">
    <div class="block">内容</div>
  </span>
</div>

通过以上方法，可以实现display属性的水平垂直居中效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [CSS基础知识（五）：水平居中和垂直居中](https://blog.csdn.net/weixin_44706267/article/details/121024126)[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%"]
- *3* [css垂直水平居中的详细实现方式（6种）](https://blog.csdn.net/weixin_46591819/article/details/129161551)[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 ]