html - 如何使div垂直和水平居中？

Question

我有一个 div，我想将其放置在页面的中心(垂直和水平)。

为了水平居中，我在 div 周围使用了 center 标签，为了垂直居中，我尝试了一些方法，但没有一个真正起作用。

查看代码:

CSS:

.vcenter{
  height: 50px;
  width: 50px;
  background: red;
  vertical-align: middle;
  margin-top: calc(50% - 25px);
}

HTML:

<center>
    <div class="vcenter">

    </div>
<center>

此外，我认为在 div 周围使用中心标签来使对象居中并不是最好的方法。

我想知道的是

• 无论屏幕大小如何，如何使 div 垂直和水平居中？
• 有没有比使用 center 标签更好的方式让 div 水平居中？

Answer 1

如果可用，使用 flex是最简单的。将这些样式应用于您要将 div 居中的容器:

display: flex;
align-items: center;
justify-content: center;