Html 如何使文本垂直居中_Html_Css

Html 如何使文本垂直居中

html css

Html 如何使文本垂直居中,html,css,Html,Css,我必须用一些背景色在中间显示一些文本内容（水平和垂直）我有这个密码 "<h2 style="text-align:center; height:40px; background-color:#ABCDEF; color:#FFFCBA;"><span style="margin:auto;">USER LOGIN</span></h2>" “用户登录” 这将使文本水平显示在中心，而不是垂直显示任何帮助都会很好谢谢。使用衬垫，去掉高度 &l

我必须用一些背景色在中间显示一些文本内容（水平和垂直）

我有这个密码

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

“用户登录”

这将使文本水平显示在中心，而不是垂直显示

任何帮助都会很好

谢谢。

使用衬垫，去掉高度

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


用户登录

试试这个

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


你的文字

CSS：

标记：

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

用户登录

使用以下代码：

<!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>


div{
宽度：100vh；
高度：100vh；
背景:#666；
颜色：#fff；
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
}
居中

使用100vh获取屏幕的高度和宽度你想使用“大约一小时”的html吗？这将帮助你：使用填充而不是容器上的高度。我认为将div设置为100%100%不是一个好主意……我喜欢你提供的关于获取高度和宽度的信息

<!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>