¿Por qué vertical-align: middle no funciona en mi span o div?

Estoy tratando de centrar verticalmente un elemento spano divdentro de otro divelemento. Sin embargo cuando lo pongo vertical-align: middle, no pasa nada. He intentado cambiar las displaypropiedades de ambos elementos, y nada parece funcionar.

Esto es lo que estoy haciendo actualmente en mi página web:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Aquí hay un jsfiddle de la implementación que muestra que no funciona: http://jsfiddle.net/gZXWC/

Esta parece ser la mejor manera: ha pasado algún tiempo desde mi publicación original y esto es lo que debería hacerse ahora: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Usando CSS3:

<div class="outer">
   <div class="inner"/>
</div>

Css:

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

Nota: Esto podría no funcionar en viejos IE

Prueba esto, me funciona muy bien:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Establecer la altura de la línea a la misma altura que contiene div también funcionará

DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

En caso de que no pueda confiar en flexbox ... Colóquelo .childen .parentel centro. Funciona cuando los tamaños de píxeles son desconocidos (en otras palabras, siempre) y tampoco hay problemas con IE9 +.

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Debes ponerte vertical-align: middleel elemento interno, no el elemento externo. Establezca la line-heightpropiedad en el elemento externo para que coincida con la heightdel elemento externo. Luego establecer display: inline-blocky line-height: normalen el elemento interior. Al hacer esto, el texto en el elemento interno se ajustará con una altura de línea normal. Funciona en Chrome, Firefox, Safari e IE 8+

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

Violín

Utilicé esto para alinear todo en el centro del contenedor wrap en caso de que ayude a alguien, lo encontré más simple:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

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

Aquí tiene un ejemplo de dos formas de hacer una alineación vertical. Los uso y funcionan bastante bien. Uno usa posicionamiento absoluto y el otro usa flexbox .

Ejemplo de alineación vertical

Con flexbox, puede alinear un elemento por sí mismo dentro de otro elemento con el display: flex;uso align-self. Si necesita alinearlo también horizontalmente, puede usarlo align-itemsy justify-contenten el contenedor.

Si no desea usar flexbox, puede usar la propiedad de posición. Si hace que el contenedor sea relativo y el contenido absoluto, el contenido podrá moverse libremente dentro del contenedor. Entonces, si usa top: 0;y left: 0;en el contenido, se colocará en la esquina superior izquierda del contenedor.

Luego, para alinearlo, solo necesita cambiar las referencias superior e izquierda al 50%. Esto colocará el contenido en el centro del contenedor desde la esquina superior izquierda del contenido.

Por lo tanto, debe corregir esto traduciendo el contenido de la mitad de su tamaño a la izquierda y arriba.

Aquí hay un gran artículo sobre cómo alinear verticalmente. Me gusta la forma flotante.

http://www.vanseodesign.com/css/vertical-centering/

El HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

Y el estilo correspondiente:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

Configuramos el div padre para que se muestre como una tabla y el div hijo para que se muestre como una celda de tabla. Entonces podemos usar la alineación vertical en el div hijo y establecer su valor en medio. Cualquier cosa dentro de este div hijo estará centrada verticalmente.

Es sencillo. Simplemente agregue display:table-cellen su clase principal.

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

¡Mira este jsfiddle !

Aquí está la última solución más simple: no es necesario cambiar nada, solo agregue tres líneas de reglas CSS a su contenedor del div en el que desea centrarse. Me encanta Flex Box#LoveFlexBox

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Prima

El justify-contentvalor se puede establecer en las siguientes opciones:

• flex-start, que alineará el div secundario donde comienza el flujo flexible en su contenedor principal. En este caso, se mantendrá en la cima.

• center, que alineará el div hijo al centro de su contenedor padre. Esto es realmente bueno, porque no es necesario agregar un div adicional para envolver a todos los niños para colocar el contenedor en un contenedor principal para centrarlos. Por eso, esta es la verdad centro vertical (de column flex-directionmanera similar, si cambia el flow-directiona row, se centrará horizontalmente.

• flex-end, que alineará el div hijo donde termina el flujo flexible en su contenedor principal. En este caso, se moverá al fondo.

• space-between, que extenderá a todos los niños desde el principio del flujo hasta el final del flujo. Si la demostración, agregué otro div hijo, para mostrar que están dispersos.

• space-around, similar a space-between, pero con la mitad del espacio al principio y al final del flujo.

Dado que vertical-alignfunciona como se espera en un td, puede poner un solo celled tableen el divpara alinear su contenido.

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

Clunky, pero funciona hasta donde puedo decir. Es posible que no tenga los inconvenientes de las otras soluciones.

Simplemente coloque el contenido dentro de una tabla con una altura del 100% y configure la altura para el div principal

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Para centrar verticalmente un elemento span o div dentro de otro div, agregue la posición relativa al div padre y la posición absoluta al div hijo. Ahora, el div hijo se puede colocar en cualquier lugar dentro del div. Ejemplo debajo de los centros, tanto horizontal como verticalmente.

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

css:

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

Este es un enfoque moderno y utiliza la funcionalidad CSS Flexbox. Ahora puede alinear verticalmente el contenido dentro de su contenedor principal simplemente agregando estos estilos al .maincontenedor

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

¡Y estás listo para irte!