html - texto - Centro de alineación vertical en Bootstrap 4
centrar div verticalmente bootstrap (11)
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 del
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 clase
d-flex
.
Paso 3: Divide el centro horizontalmente con la clase
justify-content-center
.
Paso 4: Divide el centro 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>
Estoy tratando de centrar mi contenedor en el medio de la página usando Bootstrap 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 la alineación vertical solo afecta a los elementos en línea , bloque en línea, tabla en línea y celda de tabla .
Elija entre
.align-baseline,.align-top,.align-middle,.align-bottom,.align-text-bottomy.align-text-topsegún sea necesario.
En Bootstrap 4.1.3:
Esto funcionó para mí cuando estaba tratando de centrar una insignia de bootstrap dentro de un
container > row > column
lado de un título
h1
.
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>
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 >
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>
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>
puede alinear verticalmente su contenedor haciendo que el contenedor principal se flexione y agregue
align-items:center
:
body {
display:flex;
align-items:center;
}
¡Importante! El centro vertical es relativo a la altura del padre
Si el elemento primario del elemento que intenta 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 que el
container
tenga altura 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-center
en 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-center
en flexbox parent
(
.row
es
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
justify-content-center
en flexbox parent
(
.card
es
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 usando márgenes automáticos:
Otra forma de centrar verticalmente es usar
my-auto
.
Esto centrará el elemento dentro de su contenedor.
Por ejemplo,
h-100
hace que la fila tenga altura completa, y
my-auto
centrará verticalmente la
col-sm-12
.
<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 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
.row
ahora se
display:flex
, simplemente puede usar
align-self-center
en cualquier columna para centrarla 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-center
en todo el
.row
para alinear verticalmente todos los
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
utilidades de visualización
que se pueden usar para
display:table
,
display:table-cell
,
display:inline
, etc. Estos se pueden usar con las
utilidades de alineación vertical
para alinear elementos de celda en línea, bloque en línea o de tabla.
<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 de centro vertical en
<div>
Centro vertical .row en .container
Centro vertical e inferior en
<div>
Niño de centro vertical dentro del padre
Centro vertical de pantalla completa jumbotron
¡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-100
en 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
<!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>
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<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>
