变换的原因是什么：在CSS中居中元素时进行翻译？

Question

我想学习使用CSS中的百分比而不是精确单位，这使我开始采用这种中心技术：

top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

我知道，对于绝对定位元素，top，bottom，right和left属性在元素与其祖先或父亲的边缘之间设置空格（如果有的话）。在该技术中，他们将元素放置在50％以下，50％放在左边，如果意图是水平和垂直居中的元素，那么这是合乎逻辑的，但为什么要包含用于旋转，缩放和transform属性的属性。移动具有负值的元素？

这是我的代码：

＆＃13;

＆＃13;

.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%);
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

top / left

top移动元素 x 单位的顶部边框从容器的顶部边框（或我们放置元素相对于的元素）。

left从容器的左边框移动元素 x 单位的左边框（或我们放置元素相对于的元素）。

两者的百分比均来自容器。

基本上top: 50%; left: 50%会将元素的左上角放在容器的中心。

translate

translate（X / Y）将元素从 x 单位移动到当前位置。

在这种情况下，百分比是从元素本身计算的。

translate(-50%, -50%)将元素的宽度移动一半，高度移动一半（根0,0点位于左上角，数字增加到可见区域。）