html - 同时水平和垂直居中段落文本

Question

我需要将段落中的文本水平居中和垂直居中。段落本身必须填充父元素可用高度和宽度的100%，而不设置显式/静态宽度 为段落(可以接受 100% 之类的百分比)。

HTML

<div>
<p>Sudo make me a sandwich.</p>
</div>

CSS

div
{
 background-image: url('idahoisntafraidofgorillas.png');
 height: 138px;
 width: 100%;
}

p
{
 display: table-cell;
 text-align: center;
 vertical-align: center;
}

理想情况下，这不需要任何高于 CSS 级别 2 的内容。除非我设置静态 width，否则当前代码实际上并不使文本居中，但这会破坏我正在处理的 CSS所以我正在寻找一个更优雅和更合适的解决方案。

Answer 1

尝试 vertical-align: middle 并将 display: table 添加到 div

div {
 height: 138px;
 width: 100%;
 border: 1px solid black;
 display: table;
}

p {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
}

<div>
  <p>Sudo make me a sandwich.</p>
</div>