HTML：将一个div水平和垂直地居中的方法在本教程中，我们将通过实例来学习如何在HTML中水平和垂直地将一个div居中

在本教程中，我们将通过实例来学习如何在HTML中水平和垂直地将一个div居中。

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

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

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

"justify-content: center "使div水平居中。

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

下面是一个例子。

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

CSS。

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

或者我们可以使用HTML中的style 属性将其添加到内联。

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

使用绝对位置使div居中

我们可以使用html中的绝对定位来使div水平和垂直居中。

下面是一个例子。

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

.container{
   position:absolute;
   left:50%;
   top:50%;
   transform:translate(-50%, -50%);
}