left - margin right html

La posición absoluta de css no funcionará con margin-left: auto-margin-right: auto

Question

Supongamos que tiene el siguiente css aplicado a una etiqueta div

.divtagABS {
    position: absolute;
    margin-left: auto;  
    margin-right:auto;
 }

el margen izquierdo y el margen derecho no surten efecto

pero si tienes pariente, funciona bien, es decir,

,divtagREL {
position: relative;
margin-left: auto;  
 margin-right:auto;
}

¿porqué es eso? solo quiero centrar un elemento

¿Alguien puede explicar por qué el ajuste de márgenes a automático en posición absoluta no funciona?

Answer 1

Cuando se definen estilos para la división que se posiciona absolute , especificar márgenes es inútil. Porque ya no están dentro del árbol DOM normal.

Puedes usar float para hacer el truco.

.divtagABS {
    float: left;
    margin-left: auto;  
    margin-right:auto;
 }

Answer 2

He usado este truco para centrar un elemento absolutamente posicionado . Sin embargo, debes saber el ancho del elemento.

.divtagABS {
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
  }

Básicamente, utilizas a la izquierda: 50%, luego retrocedes la mitad de su ancho con un margen negativo.

Answer 3

La primera respuesta correcta oficialmente es de :

.divtagABS {
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

Las otras respuestas involucraron principalmente una respuesta tipo ''hack''. Usar esto siempre traerá más riesgos que una solución oficial (basada en la especificación CSS de W3C). El truco se ve así.

La segunda respuesta correcta se hace a varias personas. Pero observe la diferencia entre los valores ''auto'' y ''-50px''. Aquí es donde probablemente deberías basar tu elección. Pero esta respuesta se ve así:

.divtagABS{
    width:300px;
    positon:absolute;
    left:0;
    right:0;
    margin:0 auto;
}

Para entender que este es un truco de esta solución, considere este extracto de la propiedad left de la especificación W3C:

Para elementos absolutamente posicionados

Esta propiedad especifica la distancia entre el borde del margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.

Para elementos relativamente posicionados

Esta propiedad especifica que el desplazamiento está con respecto a los bordes izquierdos de la caja misma.

Entonces, lo que sucede es que se dibujará un elemento de posición absoluta (incluidos los márgenes) de 0px / top 0px izquierdo. El elemento tiene un ancho fijo por lo que el uso de auto para las propiedades de margen seleccionará todo el ancho disponible y lo convertirá en espacios en blanco. Haga esto en ambos lados y el elemento se centrará dividiendo todo el ancho disponible entre los dos opuestos (izquierda / derecha, arriba / abajo).

Personalmente, me gusta el primero mejor, pero eso es personal, supongo.

Answer 4

Si el elemento está en posición absoluta, entonces no es relativo, o en referencia a cualquier objeto, incluida la página en sí. Entonces margin: auto; no puede decidir dónde está el medio.

Está esperando que se lo explique explícitamente, usando la left y la top para ubicarse.

Todavía puedes centrarlo programáticamente, usando javascript o somesuch.

Answer 5

Ya tuve este problema y tengo la solución escribiendo un contenedor (.divtagABS-container, en su caso) absolutamente posicionado y luego posicionando relativamente el contenido dentro de él (.divtagABS, en su caso).

¡Hecho! El AUTO de margen izquierdo y derecho de margen para su .divtagABS ahora funcionará.

Answer 6

si el elemento absoluto tiene un ancho, puede usar el siguiente código

.divtagABS{
    width:300px;
    positon:absolute;
    left:0;
    right:0;
    margin:0 auto;
}

Answer 7

EDITAR: esta respuesta solía decir que no es posible centrar un elemento absolutamente posicionado con margin: auto; , pero esto simplemente no es verdad. Debido a que esta es la respuesta más votada y aceptada, supuse que simplemente la cambiaría para ser correcta.

Cuando aplica el siguiente CSS a un elemento

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

Y luego le da al elemento un ancho y una altura fijos, como 200px o 40%, el elemento se centrará.

Aquí hay un violín que demuestra el efecto.

Answer 8

Trabajando JSFiddle a continuación. Al usar la posición absoluta, margin: 0 auto no funcionará, pero puede hacer esto (también se escalará):

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

Actualización: JSFiddle trabajo