Centrar verticalmente dos elementos dentro de un div

Ya no busques más por otras webs ya que estás al lugar justo, poseemos la respuesta que buscas y sin problemas.

Solución:

Cómo centrar elementos verticalmente, horizontalmente o ambos

Aquí hay dos formas de centrar divs dentro de divs.

Una forma usa CSS Caja flexible y la otra forma usa CSS mesa y posicionamiento propiedades.

En ambos casos, la altura de los divs centrados puede ser variable, indefinida, desconocida, lo que sea. La altura de los divs centrados no importa.

Aquí está el HTML para ambos:

   

    

        
DIV #1
    

    

        
DIV #2
    

---

Método CSS Flexbox

#container 
    display: flex;              /* establish flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: center;    /* center items vertically, in this case */
    align-items: center;        /* center items horizontally, in this case */
    height: 300px;
    border: 1px solid black;


.box 
    width: 300px;
    margin: 5px;
    text-align: center;

MANIFESTACIÓN

Los dos elementos secundarios (.box) están alineados verticalmente con flex-direction: column. Para la alineación horizontal, cambie el flex-direction a row (o simplemente elimine la regla como flex-direction: row es la configuración predeterminada). Los elementos permanecerán centrados vertical y horizontalmente (DEMO).

---

Tabla CSS y método de posicionamiento

body 
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;


#container 
    display: table-cell;
    vertical-align: middle;


.box 
    width: 300px;
    padding: 5px;
    margin: 7px auto;   
    text-align: center;

MANIFESTACIÓN

---

Que metodo usar…

Si no está seguro de qué método usar, recomendaría flexbox por estos motivos:

1. código mínimo; muy eficiente
2. como se indicó anteriormente, el centrado es simple y fácil (vea otro ejemplo)
3. columnas de igual altura son simples y fáciles
4. múltiples opciones para alinear elementos flexibles
5. es receptivo
6. a diferencia de los flotantes y las tablas, que ofrecen una capacidad de diseño limitada porque nunca se diseñaron para crear diseños, flexbox es una técnica moderna (CSS3) con una amplia gama de opciones.

---

Compatibilidad con navegador

Flexbox es compatible con todos los principales navegadores, excepto IE < 10. Algunas versiones recientes de navegadores, como Safari 8 e IE10, requieren prefijos de proveedores. Para una forma rápida de agregar prefijos, use Autoprefixer. Más detalles en esta respuesta.

Agradecemos que desees añadir valor a nuestro contenido aportando tu experiencia en las acotaciones.

---

---

Utiliza Nuestro Buscador