Pregunta Cómo centrar un elemento "posición: absoluta"


Tengo un problema centrando un elemento que tiene el atributo position ajustado a absolute. ¿Alguien sabe por qué las imágenes no están centradas?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>


502
2017-12-14 16:47


origen


Respuestas:


position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

907
2017-08-28 11:17



Sin saber el width/height del posicionado1 elemento, aún es posible alinearlo de la siguiente manera:

EJEMPLO AQUÍ

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

Vale la pena señalar que Transformación CSS  es compatible con IE9 y superior. (Prefijados del vendedor omitidos por brevedad)


Explicación

Añadiendo top/left de 50% mueve el borde superior / margen izquierdo del elemento al centro del elemento primario, y translate() funcionar con el (negativo) valor de -50% mueve el elemento a la mitad de su tamaño. Por lo tanto, el elemento se colocará en el medio.

Esto se debe a un valor porcentual en top/left propiedades es relativa a la altura / ancho del elemento principal (que está creando un bloque contenedor).

Mientras que un valor porcentual en translate()  transformar la función es relativa al ancho / alto del elemento mismo (En realidad se refiere al tamaño de cuadro delimitador).

Para una alineación unidireccional, ve con translateX(-50%) o translateY(-50%) en lugar.


1. Un elemento con un position otro que static. Es decir. relative, absolute, fixed valores.


405
2017-09-10 22:48



Centrar algo absoluteposición es bastante complicada en CSS.

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

Cambio margin-left a (negativo) la mitad del ancho del elemento que está tratando de centrar.


163
2017-12-14 16:52



Div alineado vertical y horizontalmente centro 

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

Nota: los elementos deben tener ancho y alto para establecer


72
2018-01-28 10:22



Un simple truco de CSS, simplemente agrega:

width: 100%;
text-align: center;

Esto funciona tanto en imágenes como en texto.


44
2017-10-29 15:49



Si quieres centrar un elemento absoluto

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Si desea que un contenedor se centre de izquierda a derecha, pero no de arriba abajo

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Si desea que un contenedor se centre de arriba a abajo, independientemente de ser de izquierda a derecha

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Actualización al 15 de diciembre de 2015

Bueno, aprendí este otro truco nuevo hace unos meses. Suponiendo que tienes un elemento parental relativo.

Aquí va tu elemento absoluto.

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

Con esto, creo que es una mejor respuesta que mi solución anterior. Ya que no tiene que especificar el ancho Y la altura. Éste adapta el contenido del elemento en sí.


40
2018-05-24 01:55



para centrar una posición: atributo absoluto que necesita configurar a la izquierda: 50% y margen izquierdo: -50% del ancho de la div.

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

para el centro vertical absoluto necesita hacer lo mismo, no con la izquierda con la parte superior. (NOTA: html y body deben tener min-height 100%;)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

y se puede combinar para ambos

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>

24
2017-12-14 17:02



Esto funcionó para mí:

position: absolute;
left: 50%;
transform: translateX(-50%);

22
2017-09-06 14:53



    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

ver demostración en: http://jsfiddle.net/MohammadDayeh/HrZLC/ 

text-align: center; trabaja con un position: absolute elemento al agregar left: 0; right: 0;


16
2018-05-24 01:49



El más simple, el mejor:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

Luego debe insertar su etiqueta img en una etiqueta que indique la posición: propiedad relativa, de la siguiente manera:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

14
2018-02-14 15:32