我的 div 文本在我的 div 文本居中时没有显示。我将 width 分配给 div。文本应该出现在 next 行。
这是我的代码
body,html{
width:100%;
height:100%;
background:blue
}
.centered {
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
text-align:center;
background: red; /* not necessary just to see the result clearly */
}
.abc{
background: #fff;
width:200px;
height:400px;
line-height:400px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="centered">
<div class="abc">This text is centered horizontally and vertically</div>
</div>
</body>
</html>最佳答案
line height 导致了这个问题，当你有一个换行符时，下一行将在 400px 之后，但你的 div 只有 400px 因此，由于内容的高度为 800px(2 行)，因此您会出现溢出。删除 line-height 并改为在 div 内应用中心。 Line-height 用于仅将一行文本居中。
body,
html {
width: 100%;
height: 100%;
margin:0;
background: blue
}
.centered {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: red;/* not necessary just to see the result clearly */
}
.abc {
background: #fff;
width: 200px;
height: 300px;
display: flex;
align-items: center;
text-align:center;
}<div class="centered">
<div class="abc">This text is centered horizontally and vertically</div>
</div>关于html - 为什么我的文字在居中时不显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50868150/