¿Cómo centrar verticalmente un contenedor en Bootstrap?

Este equipo de trabajo ha estado mucho tiempo buscando para darle solución a tus búsquedas, te ofrecemos la soluciones así que nuestro objetivo es que te resulte de mucha apoyo.

Solución:

La forma de caja flexible

Alineamiento vertical ahora es muy simple mediante el uso del diseño de caja flexible. Hoy en día, este método es compatible con una amplia gama de navegadores web, excepto Internet Explorer 8 y 9. Por lo tanto, necesitaríamos utilizar algunos trucos / polyfills o diferentes enfoques para IE8 / 9.

A continuación, le mostraré cómo hacerlo en solo 3 líneas de texto (independientemente de la sintaxis antigua de flexbox).

Nota: es mejor usar una clase adicional en lugar de alterar .jumbotron para lograr la alineación vertical. Yo usaría vertical-center nombre de clase, por ejemplo.

Ejemplo aquí(A Espejo en jsbin).

 
  

    ...
  

.vertical-center 
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;

Importante notas (Considerado en la demo):

1. A porcentaje valores de height o min-height propiedades es relativa a la height del elemento padre, por lo que debe especificar el height del padre explícitamente.

2. Se omite la sintaxis de flexbox prefijada / antigua del proveedor en el fragmento publicado debido a la brevedad, pero existe en el ejemplo en línea.

3. En algunos de los navegadores web antiguos, como Firefox 9 ^{(en el que he probado)}, el contenedor flexible – .vertical-center en este caso, no ocupará el espacio disponible dentro del padre, por lo tanto, debemos especificar el width propiedad como: width: 100%.

4. También en algunos de los navegadores web como se mencionó anteriormente, el elemento flexible – .container en este caso, puede que no aparezca en el centro horizontalmente. Parece la aplicada izquierda / derecha margin de auto no tiene ningún efecto sobre el artículo flexible.
   Por lo tanto, necesitamos alinearlo por box-pack / justify-content.

Para obtener más detalles y / o la alineación vertical de las columnas, puede consultar el tema siguiente:

• alineación vertical con Bootstrap 3

---

La forma tradicional de los navegadores web heredados

Esta es la respuesta anterior que escribí en el momento en que respondí esta pregunta. Este método ha sido discutido aquí y se supone que también funciona en Internet Explorer 8 y 9. Te lo explicaré en breve:

En el flujo en línea, un elemento de nivel en línea se puede alinear verticalmente al medio mediante vertical-align: middle declaración. Especificaciones de W3C:

medio

Alinee el punto medio vertical del cuadro con la línea de base del cuadro principal más la mitad de la altura x del cuadro principal.

En los casos en que el padre – .vertical-center elemento en este caso – tiene un explícito height, por casualidad si pudiéramos tener un elemento hijo que tenga exactamente el mismo height del padre, podríamos mover la línea de base del padre al punto medio del niño de estatura completa y, sorprendentemente, hacer que nuestro hijo de flujo deseado: el .container – alineado con el centro verticalmente.

Reunirnos todos

Dicho esto, podríamos crear un elemento de altura completa dentro del .vertical-center por ::before o ::after pseudo elementos y también cambiar el valor predeterminado display tipo de ella y el otro niño, el .container para inline-block.

Entonces usa vertical-align: middle; para alinear los elementos en línea verticalmente.

Aquí tienes:

  

    ...
  

.vertical-center 
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */


.vertical-center:before     /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;


.vertical-center > .container 
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;

DEMO DE TRABAJO.

Además, para evitar problemas inesperados en pantallas extra pequeñas, puede restablecer la altura del pseudoelemento a auto o 0 o cambiar su display escribir para none si es necesario así:

@media (max-width: 768px) 
  .vertical-center:before 
    height: auto;
    /* Or */
    display: none;
  

DEMO ACTUALIZADA

Y una cosa más:

Si hay footer/header secciones alrededor del contenedor, es mejor colocar los elementos correctamente (relative, absolute? Depende de usted.) y agregue un mayor z-index valor (por seguridad) para mantenerlos siempre en la parte superior de los demás.

Actualización 2020

Bootstrap 4 incluye flexbox, por lo que el método de centrado vertical es mucho más fácil y no requiere CSS adicional.

Solo usa el d-flex y align-items-center clases de utilidad ..

  

    content
  

http://www.codeply.com/go/ui6ABmMTLv

Importante: El centrado vertical es relativo a la altura. El contenedor principal de los elementos que está intentando centrar debe tener un altura definida. Si desea la altura de la página, utilice vh-100 o min-vh-100 en el padre! Por ejemplo:

  

    I am centered vertically
  

---

Consulte también: https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4

agregue Bootstrap.css y luego agregue esto a su css

   
html, bodyheight:100%; margin:0;padding:0
 
.container-fluid
  height:100%;
  display:table;
  width: 100%;
  padding: 0;

 
.row-fluid height: 100%; display:table-cell; vertical-align: middle;
 
 

.centering 
  float:none;
  margin:0 auto;

Now call in your page 


    

        

           Am in the Center Now :-)
        
    

---

---

Utiliza Nuestro Buscador