负顶部和左侧定位基础上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>