如何利用HTML制作垂直居中的多行文本_通过CSS display:table-cell技巧-html教程-PHP中文网

display:table-cell 能让多行文本在固定高度容器中垂直居中，因其模拟表格单元格并原生支持 vertical-align:middle；需父容器设固定 height、display:table-cell 和 vertical-align:middle，且不兼容 ie6/7。

如何利用html制作垂直居中的多行文本_通过css display:table-cell技巧

直接说结论：display:table-cell 能让多行文本在固定高度容器里垂直居中，但只适用于现代浏览器（IE8+、Chrome、Firefox），IE6/7 完全不支持，且会改变元素原本的块级行为。

为什么 `display:table-cell` 能垂直居中？

因为 vertical-align 只对表格单元格（table-cell）、行内元素或表格相关元素生效。把一个 div 设为 display:table-cell，就激活了它的 vertical-align:middle 能力——这和 HTML 表格里 <td valign="middle"> 是同一套机制。 <ul> <li>必须同时设置父容器明确的 <code>height（比如 height:200px），否则 vertical-align 无参照基准

text-align:center 可额外加在同级元素上实现水平居中，不是必须但常用

不能和浮动（float）、绝对定位（position:absolute）混用，会冲突

`display:table-cell` 的典型写法和常见错误

最简可行结构是：外层容器设 display:table-cell + vertical-align:middle + 固定高度；内部直接放 p、span 等内容，无需额外 wrapper。

错误写法：.container { display:block; vertical-align:middle; } → vertical-align 在 block 下完全无效
错误写法：.container { display:table-cell; } 但没设 height → 高度由内容撑开，vertical-align 失效
错误写法：给子元素（如 p）设 display:table-cell → 容器本身才是需要被“单元格化”的那个

正确示例：

.box {
  height: 150px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ccc;
}

对应 HTML：<div class="box"> <p>第一行</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>第二行</p> </div>