如何垂直和水平地居中？

Question

我有一个div，我想定位在一个页面的中心(垂直和水平)。

对于水平对中，我在div周围使用了中间的标记，对于垂直对中，尝试了几种方法，但它们都没有真正工作。

查看代码：

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，而不是使用中心标记？

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%);
}

唯一不明显的是转换考虑了元素的大小。