Question

我从在线资源中学到了一种新的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属性将div推开时，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使用自身的大小。

使用绝对定位和CSS变换的居中如何工作？

2 个答案: