Sto cercando di centrare il mio contenitore al centro della pagina usando Bootstrap 4. Finora non ho avuto successo. Qualsiasi aiuto sarebbe apprezzato.
L'ho costruito su Codepen.io, così voi ragazzi potete giocarci e farmi sapere cosa funziona come sto per idee ...
Risposte:
Importante! Il centro verticale è relativo all'altezza del genitore
Se il genitore dell'elemento che stai cercando di centrare non ha un'altezza definita , nessuna delle soluzioni di centraggio verticale funzionerà!
Ora, sul centraggio verticale in Bootstrap 4 ...
È possibile utilizzare le nuove utility flexbox e dimensioni per realizzare l' containeraltezza massima e display: flex. Queste opzioni non richiedono CSS extra (tranne per il fatto che l' altezza del contenitore (es: html, body) deve essere del 100% ).
Opzione 1 align-self-centersul bambino flexbox
<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
Opzione 2 align-items-centersul genitore flexbox ( .rowè 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
Opzione 3 justify-content-centersul genitore flexbox ( .cardè 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
Altro su Centratura verticale Bootstrap 4
Ora che Bootstrap 4 offre flexbox e altre utilità , ci sono molti approcci all'allineamento verticale. http://www.codeply.com/go/WG15ZWC4lf
1 - Centro verticale usando i margini automatici:
Un altro modo per centrare verticalmente è usare my-auto. Questo centrerà l'elemento all'interno del suo contenitore. Ad esempio, h-100rende la riga a tutta altezza e my-autocentrerà verticalmente la col-sm-12colonna.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>Centro verticale usando la demo dei margini automatici
my-auto rappresenta i margini sull'asse y verticale ed equivale a:
margin-top: auto;
margin-bottom: auto;2 - Centro verticale con Flexbox:
Poiché Bootstrap 4 .rowè ora display:flexpuoi semplicemente usare align-self-centersu qualsiasi colonna per 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>oppure, usa align-items-centertutto .rowper allineare verticalmente al centro tutto col-*nella riga ...
<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>Demo delle colonne di altezza diversa al centro verticale
Vedi questa Q / A al centro, ma mantieni la stessa altezza
3 - Centro verticale utilizzando gli strumenti di visualizzazione:
Bootstrap 4 ha utils visualizzazione che possono essere utilizzati per display:table, display:table-cell, display:inline, ecc .. Questi possono essere usati con i utils di allineamento verticale alla linea di allineamento, linea-blocco o elementi di cella di tabella.
<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 verticale con Demo Utilità display
Altri esempi
Immagine del <div>
centro verticale nel centro verticale .row in .container Centro
verticale e fondo in <div>
Centro verticale figlio all'interno del genitore
Centro verticale jumbotron a schermo intero
Importante! Ho menzionato l'altezza?
Ricorda che il centraggio verticale è relativo all'altezza dell'elemento principale . Se vuoi centrare l'intera pagina, nella maggior parte dei casi, questo dovrebbe essere il tuo CSS ...
body,html {
height: 100%;
}Oppure usa min-height: 100vh( min-vh-100in Bootstrap 4.1+) sul genitore / contenitore. Se si desidera centrare un elemento figlio all'interno del genitore. Il genitore deve avere un'altezza definita .
Vedi anche:
Allineamento verticale in bootstrap 4
Bootstrap 4 Centro verticale e allineamento orizzontale
puoi allineare verticalmente il tuo contenitore rendendo flessibile il contenitore principale e aggiungendo align-items:center:
body {
display:flex;
align-items:center;
}html, body {height:100%}... aggiungendo che ha funzionato! Grazie!
Seguire bootstrap 4 classi mi ha aiutato a risolvere questo problema
<div class="col text-center justify-content-center align-self-center">
<img width=3rem src=".." alt="...">
</div>Poiché nessuno dei precedenti ha funzionato per me, sto aggiungendo un'altra risposta.
Obiettivo: allineare verticalmente e orizzontalmente un div in una pagina usando le classi flexbox bootstrap 4.
Passaggio 1: imposta il div più esterno su un'altezza di 100vh. Questo imposta l'altezza al 100% dell'altezza Veiwport. Se non lo fai, nient'altro funzionerà. L'impostazione su un'altezza di 100%è relativa solo al genitore, quindi se il genitore non è l'altezza completa della finestra, nulla funzionerà. Nell'esempio seguente, ho impostato Body su 100vh.
Passaggio 2: impostare il div contenitore come contenitore flexbox con la d-flexclasse.
Step 3: Centra div in orizzontale con la justify-content-centerclasse.
Passaggio 4: Centra div verticalmente con align-items-center
Passaggio 5: esegui la pagina, visualizza il div diviso verticalmente e orizzontalmente.
Si noti che non è necessario impostare alcuna classe speciale sul div centrato stesso (div figlio)
<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>100vhtrucco mi ha aiutato molto. Bootstrap fornisce anche la vh-100classe per questo.
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
}Ho provato tutte le risposte da qui, ma ho scoperto che qui c'è la differenza tra h-100 e vh-100 Ecco la mia soluzione:
<div className='container vh-100 d-flex align-items-center col justify-content-center'>
<div className="">
...
</div>
</div >
In Bootstrap 4 (beta), utilizzare align-middle. Consultare la documentazione Bootstrap 4 sull'allineamento verticale :
Modificare l'allineamento degli elementi con le utilità di allineamento verticale . Si noti che l'allineamento verticale influisce solo sugli elementi di cella inline , inline-block , inline-table e table .
Scegliere tra
.align-baseline,.align-top,.align-middle,.align-bottom,.align-text-bottom, e.align-text-topin base alle esigenze.
<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>
<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>Questa linea è dove avviene la magia <div class="col-md-6 my-auto">, la my-autocentrerà il contenuto della colonna. Funziona alla grande con situazioni come l'esempio di codice sopra in cui potresti avere un'immagine di dimensioni variabili e devi avere il testo nella colonna nella giusta riga con esso.
<!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>flex-grow-1classe alla carta ne impedisce la riduzione.
Allineamento verticale Usando questo bootstrap 4 classi:
genitore: d-table
E
figlio: d-table-cell & align-middle & text-center
per esempio:
<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>e se vuoi che il genitore sia cerchia:
<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>quali due classi CSS personalizzate sono le seguenti:
.tab-icon-holder {
width: 3.5rem;
height: 3.5rem;
}
.rounded-circle {
border-radius: 50% !important
}L'utilizzo finale può essere come ad esempio:
<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>Posiziona i tuoi contenuti in un contenitore flessibile che sia alto al 100%, ad esempio h-100. Quindi giustificare il contenuto centralmente utilizzando la classe 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>usa la .my-autoclasse css (bootsrap4) sul tuo div
In Bootstrap 4.1.3:
Questo ha funzionato per me quando stavo cercando di centrare un badge bootstrap all'interno di un container > row > columnaccanto a un h1titolo.
Ciò che ha funzionato è stato alcuni semplici CSS:
.my-valign-center {
vertical-align: 50%;
}o
<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>