¿Cómo centrar div absoluto horizontalmente usando CSS?


177

Tengo un div y quiero que esté centrado horizontalmente, aunque estoy dando que margin:0 auto;no está centrado ...

.container {
    position: absolute;
    top: 15px;
    z-index: 2;
    width:40%;
    max-width: 960px;
    min-width: 600px;
    height: 60px;
    overflow: hidden;
    background: #fff; 
    margin:0 auto;
}


@LoganMzz no es porque esta pregunta tiene su ancho conocido.
Davbog

Respuestas:


408

Necesitas configurar left: 0y right: 0.

Esto especifica qué tan lejos para compensar los bordes del margen desde los lados de la ventana.

Al igual que 'arriba', pero especifica hasta qué punto el borde del margen derecho de un cuadro está desplazado hacia el [izquierdo / derecho] del borde [derecho / izquierdo] del bloque que contiene el cuadro.

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

Nota: el elemento debe tener un ancho menor que la ventana o, de lo contrario, ocupará todo el ancho de la ventana.

Si pudiera usar consultas de medios para especificar un margen mínimo , y luego hacer la transición a autotamaños de pantalla más grandes.


.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}
<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>


38
Nota: widthes un deber!
Ijas Ameenudeen 01 de

2
Sí. Esto es correcto ... usando un "text-align: center;" y un "left: 0; right: 0;" le permitirá posicionar absolutamente un div mientras lo mantiene horizontalmente centrado.
Sterling Bourne

3
@AlexG Acabo de cargar el violín en IE11 y funciona. ¿Puedes aclarar?
Brian Webster el

1
@AlexG funciona en IE11, sin embargo , no funcionará si no declaras un ancho . Yo tuve el mismo problema. Debe usar un ancho como se muestra en el ejemplo.
Panama Jack

1
también necesitó margin: autoque funcionara en nuestro caso
Crashalot

124

Esto no funciona en IE8, pero podría ser una opción a considerar. Es principalmente útil si no desea especificar un ancho.

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Eso probablemente dependería de los requisitos de su proyecto.
Kris Selbekk

3
En este momento, también debería existir una regla con el prefijo -webkit- para que funcione en Safari.
Shikkediel

Desafortunadamente, de alguna manera aplica la transparencia del div circundante también al texto dentro ..
dnl.re

1
Esta es definitivamente la respuesta. Para mí, tener un ancho establecido específicamente es absolutamente imposible.
Mike

14

Aunque las respuestas anteriores son correctas, pero para simplificar a los novatos, todo lo que necesita hacer es establecer el margen, izquierda y derecha. el siguiente código lo hará siempre que se establezca el ancho y la posición sea ​​absoluta:

margin: 0 auto;
left: 0;
right: 0;

Manifestación:

.centeredBox {
    margin: 0 auto;
    left: 0;
    right: 0;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
   
   }
<div class="centeredBox">Centered Box</div>


1
Esto funcionó perfecto para imágenes absolutas en una fila de columnas de arranque
ZachNag

5

Flexbox? Puedes usar flexbox.

.box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: center;
  justify-content: center;

}

.box div {
  border:1px solid grey;
  flex: 0 1 auto;
  align-self: auto;
  background: grey;
}
<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>


Esto realmente funcionó maravillosamente para mi caso único. left: 0; right: 0;extendido al 100%, que no era una opción ya que el elemento secundario tenía un color de fondo y left: 50%; transform: translateY(-50%);no funcionaba porque eso limitaba el ancho al 50%. Esta fue la única solución que conservó las dimensiones flexibles del niño (solo limitado al soporte del navegador). ¡Gracias!
Ben Dyer

3
.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}


0

Aquí hay un enlace, use esto para hacer el div en el centro si la posición es absoluta.

HTML:

<div class="bar"></div>

CSS:

.bar{
  width:200px;
  border-top:4px solid red;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
}

Ejemplo jsfiddle


-1

No se puede utilizar margin:auto;en position:absolute;los elementos, simplemente eliminarlo si no lo necesita, sin embargo, si lo hace, usted podría utilizar left:30%;((100% -40%) / 2) y preguntas de los medios de los valores máximo y mínimo:

.container {
    position: absolute;
    top: 15px;
    left: 30%;
    z-index: 2;
    width:40%;
    height: 60px;
    overflow: hidden;
    background: #fff;
}

@media all and (min-width:960px) {

    .container {
        left: 50%;
        margin-left:-480px;
        width: 960px;
    }

}

@media all and (max-width:600px) {

    .container {
        left: 50%;
        margin-left:-300px;
        width: 600px;
    }

}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.