Usé este código muy simple:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Obviamente, ya sea que use un .class o un #id, el resultado no cambiará.

Ahora que el soporte de flexbox está aumentando, este CSS aplicado al elemento contenedor centraría verticalmente el elemento contenido:

.container {        
    display: flex;
    align-items: center;
}

Use la versión prefijada si también necesita dirigirse al Explorador 10 y a los navegadores Android antiguos (

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Funcionó para mí:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

Una técnica de un amigo mío:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO aquí

Todos ellos deben estar alineados verticalmente dentro del div

Alineado ¿cómo ? Parte superior de las imágenes alineadas con la parte superior del texto?

Una de las imágenes debe estar posicionada de forma absoluta dentro del div.

Absolutamente posicionado en relación con el DIV? Tal vez podrías esbozar lo que estás buscando...?

Fd ha descrito los pasos para el posicionamiento absoluto, así como el ajuste de la visualización de la H1 elemento tal que las imágenes aparecerán en línea con él. A eso, añadiré que puedes alinear las imágenes usando el estilo vertical-align:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

...esto pondría el encabezado y las imágenes juntas, con los bordes superiores alineados. Existen otras opciones de alineación; consulte la documentación. También puede resultar beneficioso soltar el DIV y mover las imágenes dentro del elemento H1 - esto proporciona un valor semántico al contenedor, y elimina la necesidad de ajustar la visualización del H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

Para colocar los elementos de bloque en el centro (funciona en IE9 y superior), necesita un wrapper div:

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

Use esta fórmula, y funcionará siempre sin grietas:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Casi todos los métodos necesitan especificar la altura, pero a menudo no tenemos ninguna altura.
Así que aquí es un CSS3 3 truco de línea que no requiere saber la altura.

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

Es compatible incluso en IE9.

Con sus prefijos de proveedor:

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

Fuente: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Mi truco es poner dentro del div una tabla con 1 fila y 1 columna, establecer 100% de ancho y alto, y la propiedad vertical-align:middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Violín: http://jsfiddle.net/joan16v/sbqjnn9q /

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

Por defecto h1 es un elemento de bloque y se renderizará en la línea después del primer img, y hará que el segundo img aparezca en la línea después del bloque.

Para evitar que esto ocurra, puede configurar el h1 para que tenga un comportamiento de flujo en línea:

#header > h1 { display: inline; }

En cuanto a colocar absolutamente el img dentro del div, debe configurar el div que lo contiene para que tenga un "tamaño conocido" antes de que esto funcione correctamente. En mi experiencia, también necesitas cambiar el atributo position lejos de la posición por defecto: relative funciona para mí:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Si puede hacer que funcione, es posible que desee intentar eliminar progresivamente los atributos height, width, position de div.encabezado para obtener los atributos mínimos requeridos para obtener el efecto que desea.

ACTUALIZACIÓN:

Aquí hay un ejemplo completo que funciona en Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

Usando CSS al centro vertical, puede dejar que los contenedores externos actúen como una tabla, y el contenido como una celda de tabla. En este formato sus objetos permanecerán centrados. :)

Anidé varios objetos en JSFiddle para un ejemplo, pero la idea central es así:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

Los múltiples objetos ejemplo:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Resultado

Https://jsfiddle.net/martjemeyer/ybs032uc/1 /

Podemos usar un cálculo de función CSS para calcular el tamaño del elemento y luego colocar el elemento hijo en consecuencia.

Ejemplo HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

Y CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demo creada aquí: https://jsfiddle.net/xnjq1t22 /

Esta solución funciona bien con responsive div height y width también.

Nota: La función calc no está probada para compatibilidad con navegadores antiguos.

Simplemente use una tabla de una celda dentro del div! Simplemente establezca la altura de la celda y la tabla y con al 100% y puede usar la alineación vertical.

Una tabla de una celda dentro del div maneja la alineación vertical y es compatible con versiones anteriores de la Edad de Piedra.

Según hoy, he encontrado una nueva solución para alinear verticalmente varias líneas de texto en un div usando CSS3 (y también estoy usando el sistema de cuadrícula bootstrap v3 para embellecer la interfaz de usuario), que es la siguiente:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Según mi entendimiento, el padre inmediato del texto que contiene el elemento debe tener alguna altura. Espero que te ayude también. ¡Gracias!

He estado utilizando la siguiente solución (sin posicionamiento y sin altura de línea) desde hace más de un año, funciona con IE 7 y 8 también.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

Esta es mi solución personal para un elemento i dentro de un div

Ejemplo JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

Para mí, funcionó de esta manera:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

El elemento "a" se convierte en un botón, usando clases Bootstrap, y ahora está centrado verticalmente dentro de un "div"externo.

Actualizado-Bootstrap-4

Centrar los elementos secundarios vertical y horizontalmente

Para vertical: d-flex align-items-center

Para horizontal: d-flex justify-content-center

.width-height {
    height: 180px;width:100%"
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info width-height">
  <div class="bg-light p-2">I am in Center</div>
</div>

Para obtener más información, consulte la documentación getbootstrap.com/docs/4.0/utilities/flex / , Hay múltiples métodos para centrar los elementos.

Solo esto:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Una tabla de una celda dentro del div maneja la alineación vertical y es compatible con versiones anteriores de la Edad de Piedra.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Aquí hay otro enfoque (responsivo):

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

Http://jsfiddle.net/herrfischerhamburg/JcVxz /

Soy un tipo de.NET que acaba de entrar en la programación web. No usé CSS (bueno, un poco). Utilicé un poco de JavaScript para lograr el centrado vertical junto con jQuery .función css.

Solo estoy publicando todo de mi prueba. Probablemente no es demasiado elegante, pero funciona hasta ahora.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

<div id="header" style="display: table-cell; vertical-align:middle;">

...

O CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Cobertura del Navegador