521 votos

Cómo el centro absoluto del elemento en la div?

Necesito colocar una div (con position:absolute;), elemento que en el centro de mi ventana. Pero estoy teniendo problemas para hacerlo, debido a que el ancho de desconocido

He intentado esto. Pero debe ajustarse a medida que el ancho es sensible.

.center {
      left: 50%;
      bottom:5px;
}

Alguna idea?

1154voto

Matthias Weiler Puntos 5697

esto funciona para mí:

#content{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

786voto

bobince Puntos 270740
<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>
</body>

40voto

pratikabu Puntos 846

Muy bonito post.. Sólo quería añadir que si alguien quiere hacerlo con una sola etiqueta div entonces aquí la manera de salir:

Tomando width como 900px.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

En este caso, uno debe saber el width antemano.

11voto

cavila Puntos 815

La búsqueda de una solución obtuve respuestas anteriores y podría hacer que el contenido centrado con Matías Weiler respuesta, pero usando el texto-align.

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

Trabajó con chrome y Firefox.

7voto

Pekka 웃 Puntos 249607

Hasta donde yo sé, esto es imposible de lograr para un desconocido ancho.

Usted podría - si que funciona en el escenario absolutamente la posición de un elemento invisible con el 100% de la anchura y la altura, y tiene un elemento centrado en no usar margin: auto y posiblemente vertical-align. De otra manera, usted necesita tener Javascript para hacer eso.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X