680

Tengo un problema al centrar un elemento que tiene el atributo positionestablecido en 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>

Expandir fragmento

html css css-position centering usuario1098278
fuente

3

necesitas darle a ul # slideshow un ancho fijo ...

#

1195

Si ha establecido un ancho, puede usar:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

baaroz
fuente

21

¡Esta es una respuesta mucho más limpia que el resto! ¿Hay alguna advertencia?

sbichenko

8

La respuesta más inteligente. Lo acabo de comprobar y funciona en todos los navegadores. No funciona en IE8 pero funciona en IE> = 9

Roger

13

Asegúrese de probar en IE, este truco no funciona si el elemento tiene un 'ancho máximo' establecido en IE9

aproximadamente

33

Personalmente prefiero la sintaxis "margen: 0 automático; izquierda: 0; derecha: 0;"

Héctor Ordóñez

58

Esto simplemente no funciona, a menos que se establezca un ancho. Puede que parezca funcionar si tiene alineación de texto: céntrese en el elemento primario y no tenga un fondo en el elemento en posición absoluta, pero si coloca un fondo en él, verá que en realidad está ocupando todo el ancho. La respuesta translateX (-50%) es la correcta.

Codemonkey

587

Sin conocer el width/ heightdel elemento ¹ posicionado , todavía 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 CSS Transform es compatible con IE9 y superior . (Prefijos de proveedor omitidos por brevedad)

Explicación

Agregar top/ leftof 50%mueve el borde del margen superior / izquierdo del elemento al centro del elemento primario y translate()funciona con el valor (negativo) 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 que un valor porcentual en top/ leftpropiedades es relativo a la altura / anchura del elemento padre (que está creando un bloque contenedor).

Mientras que un valor porcentual en la función de transformación es relativo al ancho / alto del elemento en sí (en realidad se refiere al tamaño del cuadro delimitador ) .translate()

Para la alineación unidireccional, vaya con translateX(-50%)o en su translateY(-50%)lugar.

^{1. Un elemento con un positiondistinto de static. Es decir relative, absolute, fixedvalores.}

Hashem Qolami
fuente

65

¡Esta debería ser la mejor respuesta!

Chris Pine

3

¡Fantástico! ¡Lo mejor del lote!

Bhargav Ponnapalli

44

He buscado en todas partes una respuesta a esto y una buena explicación. ¡Esta es la mejor respuesta y una gran explicación también! Gracias.

Mike

55

Centrado horizontal: position: absolute; left: 50%; transform: translateX(-50%);, centrado vertical: position: absolute; top: 50%; transform: translateY(-50%);.

Константин Ван

1

Justo ahora encontré esa translatepropiedad, traduzco el elemento por el tamaño de sí mismo , sin importar el tamaño de su padre.

Farzin Kanzi

185

Centrar algo bien absoluteposicionado es bastante complicado en CSS.

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

}

Cambie margin-lefta (negativo) la mitad del ancho del elemento que está tratando de centrar.

bookcasey
fuente

55

Al probar esta no funciona cuando las imágenes son de diferentes tamaños, y todavía apilar unas sobre otras

Ryan Gibbons

3

Demasiado hack-ish (ya que casi siempre resulta con css). ¡Pero asombroso! :-)

Dr.Kameleon

1

Me sentí tentado por la inteligencia de algunas otras respuestas, pero solo esta fue confiable para mí.

Chris Schiffhauer

Tuve el mismo problema que Ryan, ¡así que probé la segunda respuesta sugerida por "baaroz" y funcionó para mí! y también admite diferentes resoluciones, ya que mi DIV principal tiene ancho en% y no PX

UID

Esto no está realmente centrado. Esto está más posicionado a la derecha

Artsicle

82

Divida el centro alineado vertical y horizontalmente

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

Nota: Los elementos deben tener ancho y alto para establecer

Sebin Simon
fuente

1

No sé por qué esto no se vota más. Funciona en todos los navegadores, incluidos los navegadores móviles, por lo que puedo decir. Costuras más confiables en términos de soporte. Es simple, fácil y limpio ...

David Martins

1

Esta es una mejor respuesta. Solo requiere un div para crear y tiene más casos de uso que llamar a la izquierda: 50% ;, superior: 50%; como la solución con más de 69 votos

Ian S

la mejor respuesta hasta ahora, ¡cualquiera que venga aquí debería verificarlo!

Abdo Adel

3

El elemento también necesita un heightconjunto para que esto funcione.

alexbooots

55

Un simple truco CSS, solo agrega:

width: 100%;
text-align: center;

Esto funciona tanto en imágenes como en texto.

cutez7boyz
fuente

48

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 esté centrado de izquierda a derecha, pero no de arriba a 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 si se deja de derecha a izquierda

#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í esto otro truco nuevo hace unos meses. Asumiendo que tiene un elemento padre 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 ancho Y alto. Éste adapta el contenido del elemento en sí.

Wesley Brian Lachenal
fuente

36

Centrar un elemento "posición: absoluto".

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}

Vadamadafaka
fuente

32

Esto funcionó para mí:

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

Deplake
fuente

27

para centrar una posición: atributo absoluto que necesita establecer a la izquierda: 50% y margen a la izquierda: -50% del ancho del 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, debe hacer lo mismo, no con la izquierda, sino con la parte superior. (NOTA: html y el cuerpo deben tener una altura mínima del 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>

Rednas
fuente

16

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

ver demo en: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; funciona con un position: absoluteelemento al agregarleft: 0; right: 0;

Mohammad Dayeh
fuente

2

Proporcione algún tipo de comentario o justificación de por qué funciona este código. Las respuestas de código se marcarán inevitablemente para su eliminación.

rayryeng

14

Lo más simple, lo 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 posea una posición: propiedad relativa, de la siguiente manera:

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

Stéphane de Luca
fuente

8

probablemente el más corto

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

Cris
fuente

1

Esto es bastante impresionante, pero solo para centrar vertical y horizontalmente necesitamos hacer un margen automático solo

Santosh

7

Si no conoce el ancho del elemento, puede usar este código:

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

Demostración en fiddle: http://jsfiddle.net/wrh7a21r/

Fuente: https://stackoverflow.com/a/1777282/1136132

joseantgv
fuente

@ NabiK.AZ este ejemplo es útil si no conoce el ancho del elemento. En su ejemplo, establece un ancho para el div.

joseantgv

7

O ahora puede usar el cuadro flexible con posición absoluta:

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}

Sebastian Thomas
fuente

Esto es tan subestimado.

Siege21x

5

No estoy seguro de lo que quieres lograr, pero en este caso solo agregar width: 100%;a tu ul#slideshow livoluntad será el truco.

Explicación

Las imgetiquetas son elementos de bloque en línea. Esto significa que fluyen en línea como texto, pero también tienen un ancho y una altura como elementos de bloque. En su CSS hay dos text-align: center;reglas aplicadas al <body>y al #slideshowWrapper(que es redundante por cierto) esto hace que todos los elementos secundarios en línea y bloque en línea se centren en sus elementos de bloque más cercanos, en su código estas son lietiquetas. Todos los elementos de bloque tienen width: 100%si son el flujo estático ( position: static;), que es el valor predeterminado. El problema es que cuando le dices a las lietiquetas que sean position: absolute;, las sacas del flujo estático normal, y esto hace que reduzcan su tamaño para ajustarse a su contenido interno, en otras palabras, como que "pierden" su width: 100%propiedad.

Konstantine Kalbazov
fuente

5

Usar left: calc(50% - Wpx/2);donde W es el ancho del elemento me funciona.

Julix
fuente

¿Cómo se determina W?

Purplejacket

Él dijo "una imagen", idealmente cuando se hacen imágenes para la web, se supone que debes hacer la imagen en el tamaño que vas a usar (en lugar de cambiar su tamaño) para evitar un peso innecesario (si haces una imagen grande pequeño) o borroso (si hace que una imagen pequeña sea grande). - Puedes usar "imageElement.naturalHeight" e "imageElement.naturalWidth" si estás usando jQuery y luego aplicar un estilo dinámico también, pero eso se está volviendo un poco complicado. Para ser justos, muchas de las otras respuestas también requieren que sepas el ancho de la imagen para que su técnica funcione.

Julix

Sin embargo, si no tiene claro cómo obtener W, en Chrome puede usar CTRL + Shift + i (herramientas de desarrollador), luego CTRL + Shift + C (modo de inspección) para desplazarse sobre los elementos y ver qué tan anchas son las cosas. También puede decidir qué tan ancho desea que sea y agregar "ancho: Wpx" a su CSS.

Julix

4

Sus imágenes no están centradas porque los elementos de su lista no están centrados; solo su texto está centrado. Puede lograr el posicionamiento que desea centrando la lista completa o centrando las imágenes dentro de la lista.

Una versión revisada de su código se puede encontrar en la parte inferior. En mi revisión, centro la lista y las imágenes dentro de ella.

La verdad es que no se puede centrar un elemento que tiene un conjunto condiciones de absoluta.

¡Pero este comportamiento puede ser imitado!

Nota: Estas instrucciones funcionarán con cualquier elemento de bloque DOM, no solo img.

Rodee su imagen con un div u otra etiqueta (en su caso, un li).
```
<div class="absolute-div">
  <img alt="my-image" src="#">
</div>
```
Nota: Los nombres dados a estos elementos no son especiales.

Modifique su css o scss para dar al div un posicionamiento absoluto y centrar su imagen.

.absolute-div {
  position: absolute;

  width: 100%; 
  // Range to be centered over. 

  // If this element's parent is the body then 100% = the window's width

  // Note: You can apply additional top/bottom and left/right attributes
  // i.e. - top: 200px; left: 200px;

  // Test for desired positioning.
}

.absolute-div img {
  width: 500px;
  // Note: Setting a width is crucial for margin: auto to work.

  margin: 0 auto;
}

¡Y ahí lo tienes! ¡Tu imagen debe estar centrada!

Tu codigo:

Probar esto:

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}

<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>

Expandir fragmento

Espero que esto haya sido útil. ¡Buena suerte!

D3RPZ1LLA
fuente

3

Un objeto absoluto dentro de un objeto relativo es relativo a su padre, el problema aquí es que necesita un ancho estático para el contenedor #slideshowWrapper, y el resto de la solución es como dicen los otros usuarios

body {
    text-align: center;
}

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

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

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

eveevans
fuente

Tu violín mientras las dos imágenes se apilan una a la otra.

Ryan Gibbons

3

Aquí hay una solución fácil y mejor para el elemento central con "posición: absoluta"

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }

<style>

</style>

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

Expandir fragmento

SantoshK
fuente

2

Puedes probar de esta manera:

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }

<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>

Expandir fragmento

Chirag Dave
fuente

1

La posición absoluta lo saca del flujo y lo coloca en 0x0 al padre (Último elemento de bloque que tiene una posición absoluta o relativa).

No estoy seguro de qué es exactamente lo que está tratando de lograr, podría ser mejor establecer el li en ay position:relativeeso los centrará. Dado su CSS actual

Echa un vistazo a http://jsfiddle.net/rtgibbons/ejRTU/ para jugar con él.

Ryan Gibbons
fuente

: / al final es casi la misma solución que la tuya ... <Up vote

eveevans

1

#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

No recuerdo dónde vi el método de centrado mencionado anteriormente, usando valores negativos superior, derecho, inferior e izquierdo. Para mí, esta técnica es la mejor, en la mayoría de las situaciones.

Cuando uso la combinación de arriba, la imagen se comporta como una imagen de fondo con la siguiente configuración:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

Puede encontrar más detalles sobre el primer ejemplo aquí:
Mantenga la relación de aspecto de un div con CSS

Marian07
fuente

0

Lo que parece estar sucediendo es que hay dos soluciones; centrado usando márgenes y centrado usando posición. Ambos funcionan bien, pero si desea posicionar de manera absoluta un elemento relativo a este elemento centrado, debe usar el método de posición absoluta, porque la posición absoluta del segundo elemento se establece de manera predeterminada en el primer elemento primario que está posicionado. Al igual que:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

Hasta que leí esta publicación, usando la técnica de margen: 0 automático, para construir un menú a la izquierda de mi contenido, tuve que construir una columna del mismo ancho a la derecha para equilibrarlo. No es bonito. ¡Gracias!

Ortigas Deane
fuente

0

Use margin-left: x%;donde x es la mitad del ancho del elemento.

Bibaswann Bandyopadhyay
fuente

-1

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>

Expandir fragmento

antílope
fuente

1

Esta respuesta solo tiene código. Si bien puede ser correcto, debe tener una explicación adjunta de por qué el código responde a la pregunta del OP. El código no se "explica por sí mismo" en Stack Exchnge.

JBH

Cómo centrar un elemento "posición: absoluto"

Respuestas:

Explicación

Explicación

¡Pero este comportamiento puede ser imitado!

¡Y ahí lo tienes! ¡Tu imagen debe estar centrada!

Tu codigo: