Centrar verticalmente un div dentro de otro div [duplicado]

Quiero centrar un div que está dentro de otro div.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

Este es el CSS que estoy usando actualmente.

    #outerDiv {
        width: 500px;
        height: 500px;
        position: relative;
    }
    
    #innerDiv {
        width: 284px;
        height: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -147px;
        margin-left: -144px;
    }

Como puede ver, el enfoque que uso ahora depende del ancho y alto de #innerDiv. Si el ancho/alto cambia, tendré que modificar los valores margin-topy margin-left. ¿Existe alguna solución genérica que pueda utilizar para centrar #innerDivindependientemente de su tamaño?

Descubrí que usar margin: autopuede alinear horizontalmente #innerDivel centro. Pero ¿qué pasa con la alineación vertical?

Jun 27 '11 15:06 user700284

tl; dr

La alineación vertical en el medio funciona, pero tendrás que usarla table-cellen tu elemento principal y inline-blocken el secundario.

Esta solución no funcionará en IE6 y 7.
La suya es la forma más segura de hacerlo.
Pero como etiquetó su pregunta con CSS3 y HTML5, estaba pensando que no le importa usar una solución moderna.

La solución clásica (disposición de la mesa)

Esta fue mi respuesta original. Todavía funciona bien y es la solución con mayor soporte. El diseño de la tabla afectará su rendimiento de renderizado , por lo que le sugiero que utilice una de las soluciones más modernas.

Aquí hay un ejemplo

Probado en:

FF3.5+
FF4+
Safari 5+
Cromo 11+
IE9+

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

Solución moderna (transformar)

Dado que las transformaciones están bastante bien soportadas ahora hay una manera más fácil de hacerlo.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Manifestación

♥ mi solución moderna favorita (flexbox)

Comencé a usar flexbox cada vez más y ahora también tiene buen soporte. Es, con diferencia, la forma más fácil.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Manifestación

Más ejemplos y posibilidades: compare todos los métodos en una página

Jun 27 '2011 08:06 meo

Otra forma de conseguir este centrado horizontal y vertical es:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

( Referencia )

Aug 14 '2013 06:08 user700284

Otra forma es usar Transform Translate.

Outer Div debe establecer su positionvalor en relativeo fixed, y el Inner Div debe establecer su positionvalor en absolute, topand leftto 50%y aplicar a transform: translate(-50%, -50%).

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}

<div class="cn">
    <div class="inner">
        test
    </div>
</div>

Expandir fragmento

Probado en:

Ópera 24.0 (mínimo 12.1)
Safari 5.1.7 (mínimo 4 con prefijo -webkit-)
Firefox 31.0 (mínimo 3.6 con prefijo -moz-, a partir de 16 sin prefijo)
Chrome 36 (mínimo 11 con prefijo -webkit-, a partir de 36 sin prefijo)
IE 11, 10 (mínimo 9 con prefijo -ms-, a partir de 10 sin prefijo)
Más navegadores, ¿puedo usarlos?

Sep 05 '2014 17:09 rnrneverdies

Alinear verticalmente cualquier cosa con solo 3 líneas de CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

Más simple

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

Según shouldiprefix, estos son los únicos prefijos que necesitas

También puede usar % como valor para la propiedad 'altura' de .parent-of-element, siempre que el padre del elemento tenga altura o algún contenido que expanda su tamaño vertical.

Apr 10 '2015 23:04 epicrato