Html CSS中div中水平和垂直居中的文本

我在HTML中创建了一个

div

：

  .Div {
  border: 1px solid red;
  margin: 1px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
  height: 80px;
  }
  ...
    <div class="Div">
    Just testing my Div.
    </div>
  ...

.Div{
边框：1px纯红；
保证金：1px；
文本对齐：居中；
垂直对齐：中间对齐；
字体大小：20px；
高度：80px；
}
...
只是在测试我的Div。
...

输出：

我希望文本在这个矩形的中间，垂直和水平。我该怎么做

需要指出的是，我没有在主体中使用这个

div

，而是在另一个

div

中使用；但在这方面，我也有

文本对齐：居中。我不知道这是否重要；但是如果需要的话，我可以提供关于这段代码的更多细节

附言：我对css和html非常陌生。如果此代码不符合某些标准，请接受我的道歉。
有几种方法可以做到这一点由于您自己首先尝试使用，因此
垂直对齐
仅适用于
显示：表格单元格。为了实现这一点，您应该将
div
，
display
设置为
表格单元格
，然后还应该为
div定义一个特定的
宽度（我刚刚用它填充了可用的视口）

所以您的最终代码应该是这样的：


.Div{
边框：1px纯红；
保证金：1px；
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
字体大小：20px；
高度：80px；
宽度：100vw；
}

只是在测试我的Div。
您可以使用
显示：flex，
调整内容：中心
和
对齐项目：在类中居中
Div

你可以去，自动生成代码，中心文本，图像或div


.Div{
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px纯红；
保证金：1px；
/*文本对齐：居中；
垂直对齐：中间对齐*/
字体大小：20px；
高度：80px；
}

只是在测试我的Div。