基于50％内容高度和宽度

Question

在白框内给出一个相对黑框：

我希望用左上和左上位置偏移黑盒子。

是否可以通过内部内容来抵消黑匣子？

Answer 1

使用transform: translate(-50%,-50%)向上移动白框，向左移动50％的整体宽度/高度。

body {
  background: #444;
}
div {
  width: 50vh;
  height: 50vh;
  background: white;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

span {
  display: block;
  background: black;
  transform: translate(-50%,-50%);
  color: white;
}

<div>
  <span>asdf asdf<br>asdfasdf<br>fooooo<br>barrr</span>
</div>