Html 为什么文本居中时不显示我的文本？

我的

div

文本居中时不显示我的

div

文本。我将

宽度

指定给

div

。文本应出现在

下一行

这是我的密码


body，html{
宽度：100%；
身高：100%；
背景：蓝色
}
.居中{
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
背景：红色；/*仅为了清楚地看到结果，不需要*/
}
.美国广播公司{
背景：#fff；
宽度：200px；
高度：400px；
线高：400px；
}

JS-Bin
此文本水平和垂直居中
问题是由
行高引起的，当您有换行符时，下一行将在
400px
之后，但您的div仅为
400px
，因此由于内容高度为
800px
（2行），因此您将出现溢出。移除
线条高度
，改为在div内应用中心<代码>行高
仅用于将一行文本居中


body，
html{
宽度：100%；
身高：100%；
保证金：0；
背景：蓝色
}
.居中{
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景：红色；/*仅为了清楚地看到结果，不需要*/
}
.美国广播公司{
背景：#fff；
宽度：200px；
高度：300px；
显示器：flex；
对齐项目：居中；
文本对齐：居中；
}

此文本水平和垂直居中
线条高度：400pxabc

类中的code>样式导致第二行消失。它在显示器下面，看不见了。删除

行高

将使文本返回，但您的文本将位于

abc

容器的顶部。可以通过多种方式将文本垂直居中。我建议将文本“此文本水平和垂直居中”包装在

标记中，然后应用以下CSS：

.abc{
    background: #fff;
    width:200px;
    height:400px;
    position: relative;
}

.abc > p {
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
    padding: 0;
    margin: 0;
}

您的HTML将如下所示：

<div class="abc">
    <p>This text is centered horizontally and vertically</p>
</div>

此文本水平和垂直居中

---

请查看此页面以了解有关如何工作的更多信息：。它还将提供更多关于文本居中的示例。

首先，您需要在问题中发布一个，而不是第三方网站。第二，我在您的示例中看到了您的文本。

整个

文本未显示完整文本这是

此文本在水平和垂直方向居中

@j08691有一个大的线条高度造成了问题，因此您不会只看到文本的一部分