CSS快速技巧：如何精确地将对象水平垂直居中

我最近需要为一个网站制作一个占位符页面。我希望徽标图像精确地位于屏幕中央，也就是水平和垂直居中。我很快想到，只需给图像元素添加一个名为“centered”的类，然后设置该类的样式即可。

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
}

但是，正如您所想，这并不完全有效。这样做只是将图像的左上角精确地放在页面中央，而不是将图像的中心放在页面中央。

为了使图像完全居中，只需应用一个等于图像高度一半的负上边距，以及一个等于图像宽度一半的负左边距即可。例如，如下所示：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

这样就可以解决问题了。

当您知道要居中对象的尺寸时，此方法效果很好。如果您不知道，或者认为尺寸可能会发生变化并希望使其具有前瞻性，请尝试以下方法：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

transform 的 translate 值基于元素的尺寸，因此这样可以很好地居中。