基于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>

​