Question

我需要在段落中水平和垂直居中文本。段落本身必须填充父元素的可用height和width的100％，而不为段落设置显式/静态width（百分比如{ {1}}可以接受。）

HTML

100%

CSS

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

理想情况下，这不应该需要比CSS级别2更高的任何内容。除非我设置静态div { background-image: url('idahoisntafraidofgorillas.png'); height: 138px; width: 100%; } p { display: table-cell; text-align: center; vertical-align: center; }，否则当前代码实际上并不会使文本居中，但是这会对我正在处理的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>

Answer 2

设置line-height，vertical-align:middle;，并确保段落元素上没有额外的边距，margin:0px;。

＆＃13;

div {
 height: 138px;
 width: 100%;
 border: 1px solid black;
}

p {
  margin:0px;
  line-height:138px;
 text-align: center;
 vertical-align: middle;
}

＆＃13;

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

＆＃13;

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

2 个答案: