如何垂直和横向居中？

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垂直和水平居中？
• 是否有更好的方法将div水平居中而不是使用 center 标签？

Answer 1

如果可用，使用flex是最简单的。将这些样式应用于要将div：

置于中心的容器

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

Answer 2

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

唯一不明显的是变换会考虑元素的大小。