¿Cómo alinear verticalmente elementos en un div?

Tengo un div con dos imágenes y un h1. Todos ellos deben estar alineados verticalmente dentro del div, uno al lado del otro.

Una de las imágenes debe absolutecolocarse dentro del div.

¿Cuál es el CSS necesario para que esto funcione en todos los navegadores comunes?

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

Wow, este problema es popular. Se basa en un malentendido en la vertical-alignpropiedad. Este excelente artículo lo explica:

Comprensión vertical-align, o "Cómo (no) centrar verticalmente el contenido" por Gavin Kistner.

"Cómo centrarse en CSS" es una gran herramienta web que ayuda a encontrar los atributos de centrado CSS necesarios para diferentes situaciones.

En pocas palabras _{^{(y para evitar la pudrición del enlace)}} :

• Los elementos en línea (y solo los elementos en línea) se pueden alinear verticalmente en su contexto a través de vertical-align: middle. Sin embargo, el "contexto" no es la altura completa del contenedor principal, es la altura de la línea de texto en la que se encuentran. Ejemplo de jsfiddle
• Para los elementos de bloque, la alineación vertical es más difícil y depende en gran medida de la situación específica:
  • Si el elemento interior puede tener una altura fija , puede hacer que su posición absolutey especificar su height, margin-topy la topposición. Ejemplo de jsfiddle
  • Si el elemento centrado consiste en una sola línea y su altura principal es fija , simplemente puede configurar el contenedor line-heightpara que complete su altura. Este método es bastante versátil en mi experiencia. Ejemplo de jsfiddle
  • ... hay más casos especiales de este tipo.

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 apuntar a Explorer 10 y navegadores Android antiguos (<4.4):

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

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

    align-items: center;
}

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 a .classo an #id, el resultado no cambiará.

A mí me funcionó:

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

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

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í

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

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

Todos ellos deben estar alineados verticalmente dentro del div.

Alineado cómo ? ¿Las partes superiores de las imágenes están alineadas con la parte superior del texto?

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

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

fd ha descrito los pasos para el posicionamiento absoluto, así como para ajustar la visualización del H1elemento de modo que las imágenes aparezcan en línea con él. A eso, agregaré que puedes alinear las imágenes usando el vertical-alignestilo:

#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 resultarle beneficioso soltar el DIV y mover las imágenes dentro del H1elemento; esto proporciona un valor semántico al contenedor y elimina la necesidad de ajustar la visualización de H1:

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

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 alturas.
Así que aquí hay un truco de 3 líneas de CSS3 que no requiere conocer 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/

De dos maneras, puede alinear elementos vertical y horizontalmente

1. Bootstrap 4
2. CSS3

1. Bootstrap 4.3.X

para alineación vertical: d-flex align-items-center

para alineación horizontal: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}

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

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

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}

<div class="container">
  <div class="child">I am in Center</div>
</div>

Mi truco es poner dentro del div una tabla con 1 fila y 1 columna, establecer el 100% del 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/

# 3 formas de hacer que el div de centro infantil en un div padre

• Método de posicionamiento absoluto
• Método Flexbox

• Método de transformación / traducción

  

  Manifestación

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

Usando CSS en el 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 como ejemplo, pero la idea central es la siguiente:

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

El ejemplo de objetos múltiples:

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/

Por defecto, h1 es un elemento de bloque y se representará en la línea después de la primera img, y hará que la segunda img aparezca en la línea que sigue al 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 posicionar 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 necesita cambiar el atributo de posición lejos de la posición predeterminada: position: 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 eso funcione, puede intentar eliminar progresivamente los atributos de altura, ancho y posición de div.header para obtener los atributos mínimos necesarios para obtener el efecto que desea.

ACTUALIZAR:

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>

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

HTML de ejemplo:

<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 heighty widthtambién.

Nota: La función calc no se prueba para compatibilidad con navegadores antiguos.

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 tengo entendido, el elemento primario inmediato del texto que contiene el elemento debe tener cierta altura. Espero que te ayude también. ¡Gracias!

Mi nueva forma favorita de hacerlo es con una cuadrícula CSS:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

¡Solo usa una tabla de una celda dentro del div! Simplemente configure la altura de la celda y la tabla con 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!

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

<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

JSFiddle Ejemplo

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 convirtió en un botón, usando clases Bootstrap, y ahora está centrado verticalmente dentro de un "div" externo.

usando display flex, primero debe envolver el contenedor del elemento que desea alinear.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

luego aplique el siguiente CSS para envolver div o outdiv en mi ejemplo

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

Sólo esta:

<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 (receptivo):

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 .NET que acaba de ingresar a la programación web. No usé CSS (bueno, un poco). Usé un pequeño JavaScript para lograr el centrado vertical junto con la función .css de jQuery.

Solo estoy publicando todo desde mi prueba. Probablemente no sea 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