css - vertical - ¿Cómo centrar absolutamente el elemento posicionado en div?

centrar imagen en div

Question

Necesito colocar un elemento div (with position:absolute; ) en el centro de mi ventana. Pero estoy teniendo problemas para hacerlo, porque el ancho es desconocido .

Intenté esto. Pero necesita ajustarse ya que el ancho es sensible.

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

¿Algunas ideas?

Answer 1

Solucion responsiva

Esta es una buena solución para diseño sensible o dimensiones desconocidas en general, si no es necesario que admita IE8 o inferior.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I''m always centered<br/>doesn''t matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

Aquí hay un JS Fiddle.

La clave es, que left: 50% es relativo al padre mientras que la transformación de la translate es relativa al ancho / alto de los elementos.

De esta manera, tiene un elemento perfectamente centrado, con un ancho flexible tanto para el niño como para el padre. Bonificación: esto funciona incluso si el niño es más grande que el padre.

También puede centrarlo verticalmente con esto (y una vez más, el ancho y la altura de padre e hijo pueden ser totalmente flexibles (y / o desconocidos)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Tenga en cuenta que es posible que también necesite un prefijo de proveedor de transform . Por ejemplo, -webkit-transform: translate(-50%,-50%);

Answer 2

Buscando una solución, obtuve las respuestas anteriores y pude hacer que el contenido se centrara con la respuesta de Matthias Weiler pero usando la alineación de texto.

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

Trabajó con chrome y firefox.

Answer 3

Entiendo que esta pregunta ya tiene algunas respuestas, pero nunca encontré una solución que funcionara en casi todas las clases, que también tenga sentido y sea elegante, así que aquí está mi opinión después de ajustar un montón:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

Lo que esto hace es decir, dame un top: 50% y una left: 50% , luego transforma (crea espacio) en ambos ejes X / Y al valor de -50% , en un sentido, "crea un espacio espejo".

Como tal, esto crea un espacio igual en todos los 4 puntos de un div, que siempre es una caja (tiene 4 lados).

Esta voluntad:

1. Trabaja sin necesidad de conocer la altura / anchura de los padres.
2. Trabaja en responsive.
3. Trabaja en el eje X o Y. O ambos, como en mi ejemplo.
4. No puedo llegar a una situación en la que no funcione.

Answer 4

Esta solución funciona si el elemento tiene width y height

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="wrapper">
  <div class="content"></div>
</div>

Answer 5

Este es un truco que descubrí para hacer que un DIV flotara exactamente en el centro de una página. Realmente feo por supuesto, pero funciona en todo.

Puntos y rayas

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

Limpiador

Wow que cinco años pasaron volando, ¿no?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

Answer 6

Este trabajo para vertical y horizontal.

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

y si quiere hacer centro de elemento del padre, establezca la posición del padre padre

 #parentElement{
      position:relative
  }

editar:

• para alinear el centro vertical de la altura del conjunto a su elemento. gracias a @Raul

• Si desea hacer que el elemento sea el centro del padre, establezca la posición del padre en relativa

Answer 7

Esto funcionó para mí:

<div class="container><p>My text</p></div>

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

Answer 8

Esto funciona para mí:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I''m the content
    </div>
  </div>
</body>

Answer 9

Funciona en cualquier ancho aleatorio desconocido del elemento posicionado absoluto que desea tener en el centro de su elemento contenedor.

Demo

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 10

HTML

<div id=''parent''>
  <div id=''centered-child''></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

Answer 11

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

Este y más ejemplos here

Answer 12

He utilizado una solución similar:

#styleName {
    position: absolute;
    margin-left: -"X"px;
}

Donde "X" es la mitad del ancho de un div que quiero mostrar. Funciona bien para mí en todos los navegadores.

Answer 13

Heres un plugin jQuery útil para hacer esto. Encontrado here No creo que sea posible puramente con CSS.

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": ''absolute'', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

Answer 14

Intenta no usar el lado oscuro de la CSS. Evite utilizar valores negativos para los márgenes. Sé que a veces te ves forzado a hacer cosas horribles como un margin-left: -450px , pero probablemente podrías hacer algo como right: 450px . Es solo mi manera de trabajar.

Answer 15

Me gustaría agregar a la respuesta de @ bobince:

<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>

Mejorado: /// esto hace que la barra de desplazamiento horizontal no aparezca con grandes elementos en el div centrado.

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; 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>
    </div>
</body>

Answer 16

Mi método de centrado preferido:

position: absolute;
margin: auto;
width: x%

• posicionamiento absoluto del elemento de bloque
• margen automático
• igual izquierda / derecha, arriba / abajo

JSFiddle here

Answer 17

Muy buena publicación. Solo quería agregar si alguien quiere hacerlo con una sola etiqueta div, aquí está la salida:

Tomando width como 900px .

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

En este caso uno debe saber el width antemano.

Answer 18

Puede colocar la imagen en un div y agregar un ID de div y tener el CSS para que div tenga una text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}

Answer 19

Que yo sepa, esto es imposible de lograr para un ancho desconocido.

Usted podría, si eso funciona en su escenario, posicionar absolutamente un elemento invisible con un 100% de ancho y alto, y centrar el elemento allí usando el margen: automático y posiblemente alineación vertical. De lo contrario, necesitarás Javascript para hacer eso.

Answer 20

Sé que ya proporcioné una respuesta, y mi respuesta anterior, junto con las demás, funciona bien. Pero he usado esto en el pasado y funciona mejor en ciertos navegadores y en ciertas situaciones. Así que pensé que también daría esta respuesta. No "edité" mi respuesta anterior y la agregué porque creo que esta es una respuesta completamente separada y las dos que he proporcionado no están relacionadas.

HTML:

<div id=''parent''>
  <div id=''child''></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

Answer 21

Un enfoque simple que me sirvió para centrar horizontalmente un bloque de ancho desconocido:

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

Se puede agregar una propiedad de alineación de texto al conjunto de reglas #block para alinear su contenido independientemente de la alineación del bloque.

Esto funcionó en versiones recientes de Firefox, Chrome, IE, Edge y Safari.

Answer 22

Versión sass / brújula de la Solución Responsiva arriba:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

Answer 23

Centro absoluto

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Demostración: http://jsbin.com/rexuk/2/

Probado en Google Chrome, Firefox e IE8

Espero que esto ayude :)

Answer 24

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I''m the content
    </div>
  </div>
</body>

Answer 25

<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>

Answer 26

#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}