欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > CSS >内容正文

CSS

CSS display: table-cell 用于水平垂直居中

发布时间：2025/3/20 CSS 54 豆豆
生活随笔 收集整理的这篇文章主要介绍了 CSS display: table-cell 用于水平垂直居中 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

CSS display: table-cell 用于水平垂直居中

在 CSS 设置居中时候，水平和垂直居中的设置略有不同，通常我们使用 text-align:center 对图片、文字等行内元素（inline / inline-block）进行水平居中，并使用 line-height 对单行文字设置垂直居中（仅适用于单行文字）。但是，如果使用表格，则可以通过 td（单元格元素）的 align="center" 及 valign="middle" 属性设置单元格内容的水平和垂直居中。 而对于那些不是表格的元素，可以通过 display: table-cell 将其模拟成一个表格单元格 td，这样就可以通过 CSS 的vertical-align: middle; /* 垂直居中*/ 和 text-align: center; /* 水平居中*/ 属性进行设置。

display 值及其作用

display 值模拟对应标签
table块元素级的表格<table>
inline-table内联元素级的表格<table>
table-caption表格标题<caption>
table-cell表格单元格<td>
table-row表格行<tr>
table-row-group表格行组<tbody>
table-column表格列<col>
table-column-group表格列组<colgroup>
table-header-group表格标题组<thead>
table-footer-group表格脚注组<tfoot>

display: table-cell 实现水平垂直居中

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>.container{width: 100px;height:50px;border: 1px solid black;display: table-cell; /* 模拟为td单元格，同时形成了 BFC *//*display: table-caption 如果设置为此项 则不能使用水平和垂直居中*/ vertical-align: middle; /* 垂直居中*/text-align: center; /* 水平居中*/margin:50px; /* table-cell 对 margin 不感知，此处设置无效*/}</style></head><body><div class="container">a</div><div class="container">b</div><div class="container">c</div></body> </html>

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>.con{background: red;display: table; /* 将父元素div模拟为块级表格 table*/margin: 50px; /* 设置父元素 table 的margin*/}.container{width: 200px;height:50px;border: 1px solid black;display: table-cell; vertical-align: middle; text-align: center; /*margin: 50px;*/ 去掉设置无效的 margin}</style></head><body><div class="con"><div class="container">a</div><div class="container">b</div><div class="container">c</div></div></body> </html>

模拟之后，其属性的使用，就可以将其视作一个标签进行使用。

reference

display:table-cell实现水平垂直居中

css Table布局-display:table

CSS布局奇淫技巧之--各种居中

转载于:https://www.cnblogs.com/HevateArvin/p/10270403.html

总结

以上是生活随笔为你收集整理的CSS display: table-cell 用于水平垂直居中的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。