【发布时间】：2017-10-26 12:08:39
【问题描述】：
我想学习在 CSS 中使用百分比而不是精确单位，这导致我采用了这种居中技术：
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
我知道对于绝对定位元素，top、bottom、right 和 left 属性设置元素与其祖先或父亲（如果有的话）的边缘之间的空间。在该技术中，他们将元素 50% 放在下方，50% 放在左侧，如果打算将元素水平和垂直居中，这是合乎逻辑的，但为什么要包含用于旋转、缩放和移动元素的 transform 属性负值？
这是我的代码：
.container {
height: 700px;
display: block;
width: 100%;
height: 700px;
text-align: center;
overflow: hidden;
}
.container img{
background-size: cover;
}
.container > h1 {
font-size: 72px;
position: absolute;
color: white;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}<div class="container">
<h1>Enjoy This Magical Experience</h1>
<img src="https://static.tumblr.com/737181aea20b4523b6fce168a29fe06b/nwsqmvx/cIhmrn4un/tumblr_static_bigstock_silhouettes_of_concert_crowd_i_1565261621.jpg"/>
</div>【问题讨论】：
-
如果你使用
top: 50%; left: 50%，它会将元素的左上角/左上角放在屏幕的中心，这通常意味着元素的内容将在实际中心的右侧和下方偏移的屏幕。transform: translate(-50%,-50%)将元素自身宽度的 50% 向上和向左移动，使元素的内容居中 - 而不仅仅是左上角。 -
但是元素在 div 内，所以 50% 不应该意味着它的一半高度和一半宽度？如果是这样，为什么需要 -50%？
-
“但是元素在一个 div 里面，所以 50% 不应该意味着它的一半高度和一半宽度？” 嗯？什么“50%”？
top: 50%将元素的 top 边缘放在页面下方 50% 处，left: 50%将元素的 left 边缘放在页面宽度的 50% 处。这意味着如果元素中有任何内容，则内容将向右和底部偏移。使用translateX(-50%)将元素向后移动 50% 以将元素的水平中心放置在 x 轴的中心，translateY(-50%)将元素向后移动 50% 的自身高度以放置跨度> -
元素的垂直中心在中心/y轴的50%
-
那是我的错误，我的容器是静态的，所以顶部对其没有影响。谢谢迈克尔！！