如何在CSS中添加等于图像宽度一半的负边距？

Question

我使用的是 的图像height: 100vh;，因此根据屏幕的分辨率，其大小会发生变化。我想为其添加负左边距，等于其宽度的一半（这取决于屏幕分辨率）。有什么解决方案可以只用 CSS 来做到这一点吗？

Answer 1

如果负左位置取决于（一半）元素宽度，您可以这样做：

transform: translateX(-50%);

transform: translateX(-50%);

*{margin:0;}

.halfThere {
  vertical-align: top;
  height: 100vh;
  transition: 0.4s;
  transform: translateX(-50%);
}
.halfThere:hover {
  transform: translateX(0%);
}