html - texto - Cómo centrarse alinear verticalmente el contenedor en bootstrap

centrar texto vertical y horizontal css

Question

Estoy buscando una forma de alinear verticalmente el div container dentro del jumbotron y colocarlo en el centro de la página.

El .jumbotron debe adaptarse a la altura y el ancho total de la pantalla, así que utilicé este CSS.

.jumbotron{
  heght:100%;
  width:100%;
}

El div .container tiene un ancho de 1025px y debe estar en el centro de la página (verticalmente central).

.container{
  width:1025px;
}

.jumbotron .container {
  max-width: 100%;
}

Mi HTML es como

<div class="jumbotron">
        <div class="container text-center">
            <h1>The easiest and powerful way</h1>
            <div class="row">
                <div class="col-md-7">
                     <div class="top-bg"></div>
                </div>

                <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                    <ul class="top-features">
                        <li>
                            <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                        </li>
                        <li>
                            <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                        </li>
                        <li>
                            <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
                            <p><strong>Check</strong><br>Constantly the status of your links.</p>
                        </li>
                        <li>
                            <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
                            <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
                        </li>
                            <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
                            <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
                    </ul>
                </div>
            </div>
        </div>
    </div>    

Así que quiero que esta página tenga el jumbotron adaptado a la altura y el ancho de la pantalla junto con el contenedor centrado verticalmente al jumbotron. ¿Cómo puedo lograrlo?

Answer 1

Actualización 2018

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 use las clases de utilidad d-flex y align-items-center ..

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

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

Answer 2

La forma de caja flexible

La alineación vertical es ahora muy simple mediante el uso de un 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, deberíamos utilizar algunos hacks / polyfills o diferentes enfoques para IE8 / 9.

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

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

Ejemplo aquí (un Mirror en jsbin) .

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>

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

Notas importantes (consideradas en la demo) :

1. Los valores porcentuales de las propiedades de height o de height min-height son relativos a la height del elemento padre, por lo tanto, debe especificar la height del padre explícitamente.

2. La sintaxis de flexbox prefijada / antigua del proveedor se omite 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 lo he probado)} , el contenedor flexible ( .vertical-center en este caso) no ocupará el espacio disponible dentro del padre, por lo tanto, debemos especificar la propiedad de width como: width: 100% .

4. También en algunos de los navegadores web como se mencionó anteriormente, el elemento flex - .container en este caso - puede no aparecer en el centro horizontalmente. Parece que el margin izquierdo / derecho aplicado de auto no tiene ningún efecto en el elemento flex.
   Por lo tanto, necesitamos alinearlo por box-pack / justify-content .

Para más detalles y / o alineación vertical de columnas, puede referirse al tema a continuación:

• alinear verticalmente con Bootstrap 3

La forma tradicional de los navegadores web heredados.

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

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

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

En los casos en que el elemento principal - .vertical-center en este caso - tenga una height explícita, por casualidad si pudiéramos tener un elemento secundario que tenga exactamente la misma height el principal, podríamos mover la línea de base del elemento principal. hasta el punto medio del niño de altura completa y sorprendentemente haga que nuestro hijo deseado para el flujo, el .container , se alinee verticalmente en el centro.

Juntando todos

Dicho esto, podríamos crear un elemento de altura completa dentro de .vertical-center mediante ::before o ::after pseudo elements y también cambiar el tipo de display predeterminado de él y el otro hijo, el .container a inline-block .

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

Aqui tienes:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.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 pseudo-elemento a auto o 0 o cambiar su tipo de display a none si es necesario, así que:

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

DEMO ACTUALIZADA

Y una cosa más:

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

Answer 3

En Bootstrap 4 :

para centrar al niño horizontalmente , use la clase bootstrap-4:

justify-content-center

para centrar al niño verticalmente , use la clase bootstrap-4:

 align-items-center

pero recuerde que no se olvide de usar la clase d-flex con estas, es una clase de utilidad bootstrap-4, como

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

Nota: asegúrese de agregar las utilidades bootstrap-4 si este código no funciona

Sé que no es la respuesta directa a esta pregunta, pero puede ayudar a alguien

Answer 4

Esta es la forma que estoy usando para alinear el contenido verticalmente - arriba / centro / abajo con bootstrap 3 filas:

Aquí está el violín Demo: js fiddle

Bootstrap 3 columns with same height and vertically aligned - 

/* columns of same height styles */

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}
/* vertical alignment styles */

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;

<div class="container">

<h2>Demo 1</h2>
<div class="row">
  <div class="row-same-height">
    <div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
    <div class="col-xs-3 col-xs-height col-top">2st column</div>
    <div class="col-xs-3 col-xs-height col-middle">3st column</div>
    <div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
  </div>
</div><!-- ./row -->
</div><!-- ./container -->

Answer 5

Mi técnica preferida:

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

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

Manifestación

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
  <div class="container text-center">
    <h1>The easiest and powerful way</h1>
    <div class="row">
      <div class="col-md-7">
        <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>

      <div class="col-md-5 iPhone-features">
        <ul class="top-features">
          <li>
            <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
            <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
          </li>
          <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
          <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
        </ul>
      </div>
    </div>
  </div>
</div>

Véase también este violín !

Answer 6

Probado en IE, Firfox y Chrome.

CSS:

    .parent-container {
        position: relative;
        height:100%;
        width: 100%;
    }

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

HTML:

    <div class="parent-container">
    <div class="child-container">
            <h2>Header Text</h2>
              <span>Some Text</span>
    </div>
    </div>

Se encuentra en https://css-tricks.com/centering-css-complete-guide/

Answer 7

agregue Bootstrap.css luego agregue esto a su css

   
html, body{height: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 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           Am in the Center Now :-)
        </div>
    </div>
</div>