Question

我必须在中心（水平和垂直）显示一些背景颜色的文本内容。

我有这段代码

"<h2 style="text-align:center; height:40px; background-color:#ABCDEF; color:#FFFCBA;"><span style="margin:auto;">USER LOGIN</span></h2>"

这使文本显示在水平居中但不垂直。

任何帮助都会很棒！

感谢。

Answer 1

使用填充，关闭高度

<h2 style="text-align:center; background-color:#ABCDEF; color:#FFFCBA;padding:20px;">
    <span style="margin:auto;">USER LOGIN</span>
</h2>

Answer 2

试试这个

<div style="width:100%; height:100%;">
    <h2 style="position:absolute;top: 50%; left: 50%;">Your text</h2> 
</div>

Answer 3

CSS：

h2{
  text-align:center; 
  background-color:#ABCDEF;
  color:#FFFCBA;
  height:40px;
}

span{
  line-height:40px;
}

MARKUP：

<h2 ><span>USER LOGIN</span></h2>

Answer 4

使用以下代码：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100vh;
  height: 100vh;
  background: #666;
  color: #fff;
  text-align: center;
  display:table-cell;
  vertical-align:middle;
}
</style>
</head>
<body>

<div>center</div>

</body>
</html>

使用100vh

获取屏幕的高度和宽度

如何使文本垂直居中

4 个答案: