Centro de alineación vertical en Bootstrap 4

322

Estoy tratando de centrar mi contenedor en el medio de la página usando Bootstrap 4. Hasta ahora no he tenido éxito. Cualquier ayuda sería apreciada.

Lo he construido en Codepen.io para que puedan jugar con él y decirme qué funciona a partir de ideas ...

Mostrar fragmento de código

var currentAuthor = "";
var currentQuote  = "";
function randomQuote() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function( response ) {
        $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
        
        currentAuthor = response.quoteAuthor;
        currentQuote  = response.quoteText
      }
  });
}

function openURL(url){
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function tweetQuote(){
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}

$(document).ready(function () {
    randomQuote();

    $("#get-another-quote-button").click(function(){
        randomQuote();
    });

   $('#tweet').on('click', function() {
       tweetQuote();
   });
});

html, body {
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
    background-color: #17234E;
    margin-bottom: 0;
    min-height: 30%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}


.btn-new-quote {
    color: #0C0C0D;
    background-color: transparent;
    border-color: #414147;
}

.btn-new-quote:hover {
    color: #0C0C0D;
    background-color: #9A989E;
    border-color: #0C0C0D;
}

#tweet {
    color: RGB(100, 100, 100);
}

#tweet:hover {
    color: RGB(50, 50, 50);
}


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    border-color:  RGB(50, 50, 50);
    padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
    <div class="row justify-content-center align-self-center">
        <div class="col-sm-6">
            <div class="jumbotron vertical-center text-center">
                <h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
                <p id="quote-author" class="lead"><em></em></p>
                <hr class="my-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-sm-1-4 text-left">
                        <a id="tweet" href="#">
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
                        </a>
                    </div>
                    <div class="col-sm-1-4 text-right">
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

Expandir fragmento

— canaan seaton
fuente

675

¡Importante! El centro vertical es relativo a la altura del padre

Si el padre del elemento que está tratando de centrar no tiene una altura definida , ¡ ninguna de las soluciones de centrado vertical funcionará!

Ahora, en el centrado vertical en Bootstrap 4 ...

Puede usar las nuevas utilidades de flexbox y tamaño para hacer la containeraltura completa y display: flex. Estas opciones no requieren CSS adicional (excepto que la altura del contenedor (es decir: html, body) debe ser del 100% ).

Opción 1 align-self-centeren flexbox child

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://www.codeply.com/go/fFqaDe5Oey

Opción 2 align-items-centeren flexbox parent ( .rowis display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/BumdFnmLuk

Opción 3 justify-content-centeren flexbox parent ( .cardis display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/3gySSEe7nd

Más información sobre el centrado vertical Bootstrap 4

Ahora que Bootstrap 4 ofrece flexbox y otras utilidades , hay muchos enfoques para la alineación vertical. http://www.codeply.com/go/WG15ZWC4lf

1 - Centro vertical utilizando márgenes automáticos:

Otra forma de centrar verticalmente es usar my-auto. Esto centrará el elemento dentro de su contenedor. Por ejemplo, h-100hace que la fila tenga toda la altura y my-autocentrará verticalmente la col-sm-12columna.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Centro vertical con demostración de márgenes automáticos

my-auto representa los márgenes en el eje vertical y y es equivalente a:

margin-top: auto;
margin-bottom: auto;

2 - Centro vertical con Flexbox:

Dado que Bootstrap 4 .rowes ahora display:flex, simplemente puede usarlo align-self-centeren cualquier columna para centrarlo verticalmente ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

o, use align-items-centeren su totalidad .rowpara alinear verticalmente en el centro todo col-*en la fila ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Demostración de columnas de altura vertical de centro vertical

Vea este Q / A al centro, pero mantenga la misma altura

3 - Centro vertical usando las utilidades de pantalla:

Bootstrap 4 tiene utils de visualización que se pueden utilizar para display:table, display:table-cell, display:inline, etc .. Estos pueden ser usados con los utils de alineación vertical a inline align, elementos de celda de tabla inline-block o.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Centro vertical con demostración de utilidades de pantalla

Más ejemplos
Imagen del centro vertical en el <div>
centro vertical .row en .container
Centro vertical e inferior en el <div>
centro vertical niño dentro de padre padre
Centro vertical jumbotron de pantalla completa

¡Importante! ¿Mencioné altura?

Recuerde que el centrado vertical es relativo a la altura del elemento padre . Si desea centrarse en toda la página, en la mayoría de los casos, este debería ser su CSS ...

body,html {
  height: 100%;
}

O use min-height: 100vh( min-vh-100en Bootstrap 4.1+) en el padre / contenedor. Si desea centrar un elemento hijo dentro del padre. El padre debe tener una altura definida .

Ver también:
Alineación vertical en
Bootstrap 4 Bootstrap 4 Alineación vertical y horizontal central

— Zim
fuente

1

Cuando uso arriba en una página con una barra de navegación, obtengo una barra de desplazamiento. Creo que agrega 100% de altura debajo de la barra de navegación y se centra en ella. ¿Cómo puedo arreglar eso?

— newdimension

Estoy tratando de alinear varias filas al centro con el cuadro flexible. Quiero alinear todos los botones en el centro. codeply.com/go/5abdqC33cU

— Coder

Preparé un codepen que actualmente muestra 3 formas de centrar en función de las formas que se muestran aquí: codepen.io/yigith/pen/oNjmGEL

— KodFun

23

puede alinear verticalmente su contenedor haciendo que el contenedor principal se flexione y agregue align-items:center:

body {
  display:flex;
  align-items:center;
}

Pluma actualizada

— Pete
fuente

1

ohhh lol, me perdí el enlace en la descripción ... también agregaste html, body {height:100%}... ¡agregar eso lo hizo funcionar! ¡Gracias!

— canaan seaton

1

su respuesta no resuelve el problema de la manera solicitada (usando bootstrap)

— AlexNikonov

1

Estoy totalmente de acuerdo con usted, usted propone una solución alternativa a pesar de la pregunta sobre cómo hacerlo con las clases de Bootstrap.

— AlexNikonov

@AlexNikonov en ninguna parte de la pregunta de OP dice que están limitados a usar solo bootstrap: esta es una alternativa para otras personas que pueden aterrizar en esta página buscando alinear verticalmente las cosas sin el uso de clases de bootstrap. Solo avance: hay muchas otras respuestas aquí para que las use. No entiendo por qué te obsesionas con esto: este es un foro para todas las ideas que ayudarán, no solo respuestas resueltas. Se usuarios como usted está echando a perder este sitio por downvoting respuestas que ofrecen una solución al problema, pero sólo porque no me gusta

— Pete

@AlexNikonov también si lees la publicación original sin editar (cuando agregué mi respuesta), también verás que OP estaba tratando de centrarse sin usar clases bootstrap, así que al momento de responder, esto era correcto

— Pete

23

Las siguientes clases de bootstrap 4 me ayudaron a resolver esto

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

— Manoj
fuente

1

Sin embargo, eso no centró mi div verticalmente.

— amanecer

¿Puedes por favor elaborar tu código CSS? compartir un fragmento de él, analizaría el problema que está enfrentando.

— Manoj

12

Debido a que nada de lo anterior funcionó para mí, estoy agregando otra respuesta.

Objetivo: alinear vertical y horizontalmente un div en una página usando las clases de bootstrap 4 flexbox.

Paso 1: Establezca su div más externo a una altura de 100vh. Esto establece la altura al 100% de la Altura del Veiwport. Si no haces esto, nada más funcionará. Establecerlo en una altura de 100%solo es relativo al padre, por lo que si el padre no tiene la altura completa de la ventana gráfica, nada funcionará. En el siguiente ejemplo, configuré el cuerpo a 100vh.

Paso 2: Configure el contenedor div para que sea el contenedor flexbox con la d-flexclase.

Paso 3: Centre div horizontalmente con la justify-content-centerclase.

Paso 4: Centre div verticalmente con el align-items-center

Paso 5: Ejecute la página, vea su div centrado vertical y horizontalmente.

Tenga en cuenta que no hay una clase especial que deba establecerse en el div centrado en sí (el div hijo)

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

— Greg Gum
fuente

@AjayKumar, ¿Te gustaría compartir tus modificaciones?

— Greg Gum

Gracias, especialmente el 100vhtruco me ayudó mucho. Bootstrap también proporciona la vh-100clase para esto.

— svens

10

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

— Cervezas Nate
fuente

5

He intentado todas las respuestas aquí, pero descubrí que la diferencia entre h-100 y vh-100 es mi solución:

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

— AlexNikonov
fuente

4

En Bootstrap 4 (beta), use align-middle. Consulte la documentación de Bootstrap 4 sobre alineación vertical :

Cambie la alineación de elementos con las utilidades de alineación vertical . Tenga en cuenta que vertical-align sólo afecta inline , inline-block , inline-table , y la celda de la tabla de elementos.

Elegir .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, y .align-text-top, según sea necesario.

— vallismortis
fuente

4

<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

— Tariqul_Islam
fuente

tus fotos me hicieron pensar que el stackoverflow comenzó los advs: D

— AlexNikonov

4

<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

Esta línea es donde ocurre la magia <div class="col-md-6 my-auto">, my-autocentrará el contenido de la columna. Esto funciona muy bien con situaciones como el ejemplo de código anterior donde es posible que tenga una imagen de tamaño variable y necesite tener el texto en la columna a la derecha alineada con ella.

— Robar
fuente

3

Lo hice de esta manera con Bootstrap 4.3.1:

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

— webjay
fuente

2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

— Anu
fuente

@AjayKumar Agregar la flex-grow-1clase a la tarjeta evita que se reduzca.

— Fred

1

Alineación vertical Usando este bootstrap 4 clases:

padre: d-table

Y

hijo: d-table-cell & align-middle & text-center

p.ej:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

y si quieres que los padres sean un círculo:

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

qué dos clases de CSS personalizadas son las siguientes:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

El uso final puede ser como por ejemplo:

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

— Jafar Amini
fuente

0

Coloque su contenido dentro de un contenedor flexbox que sea 100% alto, es decir, h-100. Luego justifique el contenido de manera central mediante el uso de la clase justify-content-center .

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

— Mwiza
fuente

-1

use .my-auto(bootsrap4) clase css en su div

— Preshan Pradeepa
fuente

-2

En Bootstrap 4.1.3:

Esto funcionó para mí cuando estaba tratando de centrar una insignia de arranque dentro de una al container > row > columnlado de un h1título.

Lo que funcionó fue un simple CSS:

.my-valign-center {
  vertical-align: 50%;
}

o

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

— phyatt
fuente