HTML--将一个div元素垂直居中的方法在本教程中，我们将通过实例来学习如何在HTML中把一个div元素垂直居中。考

在本教程中，我们将通过实例来学习如何在HTML中把一个div元素垂直居中。

考虑一下，我们的HMTL中有以下div元素。

<div class="container">
  <h1>Hello, User</h1>
</div>

要在HTML中使一个div垂直居中，请在div的CSS类中添加display:flex 和align-items: center 。

"align-items: center "使div垂直居中。

下面是一个例子。

<div class="container">
  <h1>Hello, User</h1>
</div>

CSS。

.container{
    display: flex;
    align-items: center;
    height:100vh;
}

或者我们可以使用HTML中的style 属性为div添加内联样式。

<div style="display:flex; align-items:center; height:100vh;">
  <h1>Hello, User</h1>
</div>

使用绝对位置将div垂直居中

我们可以使用HTML中的绝对定位来使div垂直居中。

下面是一个例子。

<div class="container">
     <h1>Hello, User</h1>
</div>

.container{
   position:absolute;
   top:50%;
   transform:translateY(-50%);
}