如何使用绝对定位和CSS转换进行居中工作？ [重复]

Question

这个问题在这里已有答案：

• How to center a “position: absolute” element 24回答
• How to center absolutely positioned element in div? 32个答案

我从在线资源中学习了一种新的（对我而言）中心div的方法。我无法掌握作者，所以请解释这里到底发生了什么。

<header class="header">
        <div class="header-box">
            <h1>
                Lorem Ipsum <br>
                Dolor sit amet
            </h1>
        </div>
    </header>

.header {
    position: relative;
    height: 100vh;
    background-image: linear-gradient(
        to right bottom, 
        rgba(17, 63, 112), 
        rgba(253, 135, 31));
    background-position: top;
}

.header-box {
    position: absolute;
    top: 50%;  /*This and next line*/
    left: 50%; 
    transform: translate(-50%, -50%); /*and this*/
}

h1 {
  text-align: center;
}

当position属性将它推开时，Transform属性如何完美地将div对齐在中心？

https://jsfiddle.net/ux1r3eb0/

Answer 1

我将在水平对齐的上下文中对此进行描述，但完全相同的原则适用于垂直对齐：

绝对位置将元素的左侧移动到屏幕的中心，然后变换将元素的中心向左移动一半的宽度，该宽度将元素的中心与容器的中心对齐。

可视化示例（我只显示水平移动，以便更容易理解）：

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/AAAZ4gk3AAAACklEQVR4XmNgAAAAAgAB3p6PvwAAAABJRU5ErkJggg==');
  background-position: center;
  background-size: 1px 100%;
  background-repeat: no-repeat;
}

.content {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  border: 1px solid #F00;
  animation-name: demo;
  animation-duration: 8s;
  animation-fill-mode: forwards;
}

@keyframes demo {
  0% {
    left: 0%;
    transform: translate(0%, -50%);
  }
  50% {
    left: 50%;
    transform: translate(0%, -50%);
  }
  100% {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

<div class="container">
  <div class="content"></div>
</div>

Answer 2

top和left财产从.header-box的顶部和左侧推开了.header。 50%值表示.header的高度和宽度的50％

而translate(-50%, -50%)让.header-box将自己拉回自己的一半大小。

当您在top，left，right，bottom属性中使用百分比时，它使用最接近定位的祖先元素的大小，而transform使用其自身的大小。