¿Por qué "left: 50%, transform: translateX(-50%)" centra horizontalmente un elemento?

Question

¿Por qué "left: 50%, transform: translateX(-50%)" centra horizontalmente un elemento?

Recientemente refactoricé algunos de mis CSS y me sorprendió gratamente encontrar una manera más fácil de alinear horizontalmente mi elemento absolutamente posicionado:

.prompt-panel {
    left: 50%;
    transform: translateX(-50%);
}

Esto funciona muy bien! Incluso si el ancho de mi elemento es automático. Sin embargo, no entiendo qué está pasando para que esto realmente funcione. Mi suposición era que translateX era solo un medio moderno y más eficiente de mover un elemento, pero ese no parece ser el caso.

¿No deberían estos dos valores cancelarse entre sí ¿fuera? Además, ¿por qué

.prompt-panel {
    left: -50%;
    transform: translateX(50%);
}

¿No muestra el mismo resultado que el primer fragmento de código?

36

css css3

Author: Sean Anderson, 2014-09-22

Source

2 answers

left 50% moverá el elemento exactamente en el centro del contenedor principal donde este elemento pertenece! PERO translateX(50%) moverá el elemento a la derecha exactamente al 50% de su ancho,y NO en el centro de todo el elemento Contenedor!

Esa es la principal diferencia entre ellos y es por eso que este ejemplo tiene diferencias!

Un ejemplo general para aclarar esto: (fiddle aquí):

#pos
{
    border:1px solid black;
    position:absolute;
    width:200px;
    height:150px;
}
#pos-2
{
    border:1px solid black;
    position:absolute;
    width:auto;
    height:150px;
}
.prompt-panel {
 position:absolute;
}

.prompt-panel1 {
    position:absolute;
    left: 50%;
}
.prompt-panel2 {
    position:absolute;
    left: -50%;   
}
.prompt-panel3 {  
     position:absolute;
     transform: translateX(-50%);
}

.prompt-panel4 {  
     position:absolute;
     transform: translateX(50%);
}
.prompt-panel5 {  
     position:absolute;
     left: 50%;
     transform: translateX(-50%);
}
.prompt-panel6 {  
     left: -50%;
      transform: translateX(50%);
}
#pos-auto
{
    position:absolute;
}

<div><b> With fixed width 200px</b></div>
<br/>
<div id="pos">
<div class="prompt-panel">panel</div>
<br/>
<div class="prompt-panel1">panel1</div>
<br/>
<div class="prompt-panel2">panel2</div>
<br/>
<div class="prompt-panel3">panel3</div>
<br/>
<div class="prompt-panel4">panel4</div>
<br/>
<div class="prompt-panel5">panel5</div>
<br/>
<div class="prompt-panel6">panel6</div>
</div>
<br/><br/><br/> <br/><br/><br/><br/><br/><br/>
<div><b> With fixed width auto</b></div>
<br/>
<div id="pos-2">
<div class="prompt-panel">panel</div>
<br/>
<div class="prompt-panel1">panel1</div>
<br/>
<div class="prompt-panel2">panel2</div>
<br/>
<div class="prompt-panel3">panel3</div>
<br/>
<div class="prompt-panel4">panel4</div>
<br/>
<div class="prompt-panel5">panel5</div>
<br/>
<div class="prompt-panel6">panel6</div>
</div>

12

Author: Giannis Grivas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-22 21:48:41

score 47 · Accepted Answer

La propiedad CSS left se basa en el tamaño del elemento padre. La propiedad transform se basa en el tamaño del elemento de destino.

Nombre: transform

Porcentajes: se refiere al tamaño del cuadro delimitador [del elemento al que se aplica el estilo]

Http://www.w3.org/TR/css3-transforms/#transform-property

'top'

Porcentajes: refiérase a la altura del contenido block

Http://www.w3.org/TR/CSS2/visuren.html#position-props

Si el padre es de 1000px de ancho y el hijo es de 100px, el navegador interpretará las reglas en su pregunta como:

Ejemplo 1:

.prompt-panel {
    left: 500px;
    transform: translateX(-50px);
}

Ejemplo 2:

.prompt-panel {
    left: -500px;
    transform: translateX(50px);
}