CSS 居中变换

Question

为什么使用变换居中可以平移并且左 50% 完美居中（相对于父级的位置），但右 50% 却不能？

工作示例：

span[class^="icon"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }

不居中的示例：

span[class^="icon"] {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
 }

Answer 1

因为

translateX(-50%)

将某物移回 left 50%（因为

-

为负值），这意味着它与

left: 50%;

配对以将某物居中。

如果您想使用

right: 50%;

，请将其与

translateX(50%)

一起使用以居中。

* {margin:0;}
span {
  position: absolute;
  top: 50%; right: 50%;
  transform: translate(50%,-50%);
  background: black;
  color: white;
}

body:after, body:before {
  content: '';
  position: absolute;
  background: red;
}

body:after {
  top: 50%;
  left: 0; right: 0;
  height: 1px;
}
body:before {
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
}

<span>center me</span>

Answer 2

根据我的理解，

top:

和

left:

真正的意思是“对象的顶部边缘距其容器顶部有多远”（容器指的是具有相对位置的最近的父元素）和“对象的左侧有多远”边缘来自其容器的左侧”。具体来说，

top: 50%

表示对象移动容器高度的 50%，

left: 50%

表示对象移动容器宽度的 50%。

一旦元素的原点位于中心，您可以看到，通过将元素向左移动其宽度的一半并向上移动其高度的一半，对象的中心将位于原点而不是其上部左角。

如果我们改为使用

right: 50%

，那么元素的右侧将从容器的右侧移动容器宽度的 50%，这意味着它的 右上边缘 位于原点上。因此，通过将其向右移动其宽度的 50% 并向上移动其高度的 50% (

transform(50%, -50%)

)，我们将使对象居中。

Answer 3

left

和

right

将内部内容移动到其自身的中心。

translate

将内容向左和向上移动一半大小。

body {
  background: #222;
}

.centered {
  position: absolute;
  /* Translate it */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Remove default padding/border */
  margin: 0;
  padding: 0;
}

span {
  background: #b22;
  color: #eee;
  padding: 0.5rem 1rem;
  border: thin solid #fff;
  font-weight: bold;
  box-shadow: inset 0.1rem 0.1rem 0.05rem #000;
  text-shadow: #000 0.1rem 0.1rem 0.05rem;
}

/* Crosshair */
.crosshair {
  &:before, &:after { position: absolute; background: #777; content: ''; }
  &:before { left: 50%; top: 0; bottom: 0; width: 1px; }
  &:after { top: 50%; left: 0; right: 0; height: 1px; }
}

<div class="crosshair"></div>
<div class="centered">
  <span>Hello World</span>
  <span>Hello World</span>
  <span>Hello World</span>
</div>

转型的现代替代方案

这里有两种替代旧式转换技术的方法。

对齐块内容

您可以使用

align-content

和

text-align

将

block

元素居中。

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  align-content: center;
  text-align: center;
  background: #222;
}

body > span {
  background: #b22;
  color: #eee;
  padding: 0.5rem 1rem;
  border: thin solid #fff;
  font-weight: bold;
  box-shadow: inset 0.1rem 0.1rem 0.05rem #000;
  text-shadow: #000 0.1rem 0.1rem 0.05rem;
}

/* Crosshair */
.crosshair {
  &:before, &:after { position: absolute; background: #777; content: ''; }
  &:before { left: 50%; top: 0; bottom: 0; width: 1px; }
  &:after { top: 50%; left: 0; right: 0; height: 1px; }
}

<span>Hello World</span>
<span>Hello World</span>
<span>Hello World</span>
<div class="crosshair"></div>

弹性盒

或者，您可以创建一个跨越页面高度/宽度的包装器/覆盖元素。如果你给它一个 Flexbox 布局，你可以对齐/调整其中的内容。

body {
  background: #222;
}

.centered {
  /* Cover viewport */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* Remove default padding/border */
  margin: 0;
  padding: 0;
  /* Flexbox with centering */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

span {
  background: #b22;
  color: #eee;
  padding: 0.5rem 1rem;
  border: thin solid #fff;
  font-weight: bold;
  box-shadow: inset 0.1rem 0.1rem 0.05rem #000;
  text-shadow: #000 0.1rem 0.1rem 0.05rem;
}

/* Crosshair */
.crosshair {
  &:before, &:after { position: absolute; background: #777; content: ''; }
  &:before { left: 50%; top: 0; bottom: 0; width: 1px; }
  &:after { top: 50%; left: 0; right: 0; height: 1px; }
}

<div class="crosshair"></div>
<div class="centered">
  <span>Hello World</span>
  <span>Hello World</span>
  <span>Hello World</span>
</div>