Dans une page Bootstrap responsive comment centrer une div
j'ai besoin de créer une page responsive en utilisant bootstrap par position une div au centre d'une page comme dans la mise en page mentionnée ci-dessous.
9 réponses
mise à jour pour Bootstrap 4
alignement plus simple de la grille verticale avec flex-box
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
height: 100%
}<div class="h-100 row align-items-center">
<div class="col" style="background:red">
TEXT
</div>
</div>Solution pour Bootstrap 3
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
html, body, .container-table {
height: 100%;
}
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
</div>
</div>c'est un exemple simple d'un div horizontalement et verticalement centré dans toutes les tailles d'écran.
CSS:
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
HTML:
<div class="container">
<div>
example
</div>
</div>
mise à jour pour Bootstrap 4
maintenant que Bootstrap 4 est flexbox, l'alignement vertical est plus facile. Avec une Flexbox div pleine hauteur, juste us my-auto pour les marges supérieures et inférieures...
<div class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<h1 class="display-3">Hello, world!</h1>
</div>
</div>
http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center
In bootstrap 4
à centrer les enfants horizontalement , utiliser bootstrap-4 classe
justify-content-center
à centrer les enfants verticalement , utiliser bootstrap-4 classe
align-items-center
mais n'oubliez pas d'utiliser la classe d-flex avec ces c'est une classe utilitaire bootstrap-4, comme so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<div class="bg-primary">MIDDLE</div>
</div>
Note: assurez-vous d'ajouter des utilitaires bootstrap-4 si ce code ne fonctionne pas
sans table d'affichage et sans bootstrap, je préférerais faire que
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
</div>
</div>
html, body, .container-table {
height: 100%;
}
.container-table {
width:100vw;
height:150px;
border:1px solid black;
}
.vertical-center-row {
margin:auto;
width:30%;
padding:63px;
text-align:center;
}
bonne réponse ppollono. J'étais juste en train de jouer et j'ai eu une meilleure solution. La CSS resterait la même, c'est-à-dire :
html, body, .container {
height: 100%;
}
.container {
display: table;
vertical-align: middle;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
mais pour HTML:
<div class="container">
<div class="vertical-center-row">
<div align="center">TEXT</div>
</div>
</div>
Ce serait suffisant.
je pense que la façon la plus simple d'accomplir la disposition avec bootstrap est comme ceci:
<section>
<div class="container">
<div class="row">
<div align="center">
<div style="max-width: 200px; background-color: blueviolet;">
<div>
<h1 style="color: white;">Content goes here</h1>
</div>
</div>
</div>
</div>
</div>
tout ce que j'ai fait était d'ajouter des couches de divs qui m'ont permis de centrer le div, mais puisque je n'utilise pas de pourcentages, vous devez spécifier la largeur maximale du div pour être centre.
Vous pouvez utiliser cette même méthode pour centrer sur plusieurs colonnes, vous avez juste besoin d'ajouter plus de div couches:
<div class="container">
<div class="row">
<div align="center">
<div style="max-width: 400px; background-color: blueviolet;">
<div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
<div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
<h1 style="color: white;">Some content</h1>
</div>
<div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
<p style="color: white;">More content</p>
</div>
</div>
</div>
</div>
</div>
</div>
Note: que j'ai ajouté un div avec la colonne 12 pour md, sm et xs, si vous ne le faites pas le premier div avec la couleur de fond (dans ce cas "blueviolet") va s'effondrer, vous serez en mesure de voir les divs enfants, mais pas la couleur de fond.
Voici des règles CSS simples qui mettent n'importe quel div dans le centre
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center /
jsFiddle
HTML :
<div class="container" id="parent">
<div class="row">
<div class="col-lg-12">text
<div class="row ">
<div class="col-md-4 col-md-offset-4" "id="child">TEXT</div>
</div>
</div>
</div>
</div>
CSS :
#parent {
text-align: center;
}
#child {
margin: 0 auto;
display: inline-block;
background: red;
color: white;
}