web-dev-qa-db-fra.com

Dans une bootstrap page sensible, comment centrer une div

position a div at centre of a responsive page

J'ai besoin de créer une page sensible à l'aide de bootstrap en plaçant un div au centre de la page, comme dans la disposition mentionnée ci-dessous.

csscss3twitter-bootstrapresponsive-design
120
Rama Priya

UPDATE pour Bootstrap 4

Alignement vertical plus simple de la grille 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 centre horizontalement et verticalement centré dans toutes les tailles d'écran.

163
ppollono

CSS: 

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML: 

<div class="container">
  <div>
    example
  </div>
</div>

Exemple de violon

35
vocasle

Dans bootstrap 4

pour centrez les enfants horizontalement, utilisez la classe bootstrap-4

justify-content-center

pour centrez les enfants verticalement, utilisez la classe bootstrap-4

 align-items-center

mais souvenez-vous de ne pas oublier d'utiliser la classe d-flex avec ces classes, c'est une classe utilitaire bootstrap-4, comme ça

<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 les utilitaires bootstrap-4 si ce code ne fonctionne pas

15
user9299363

Mise à jour pour Bootstrap 4

Maintenant que Bootstrap 4 est une flexbox, l'alignement vertical est plus facile. Avec une hauteur maximale flexbox div, il ne reste que nous my-auto pour obtenir des marges égales en haut et en bas ...

<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

centre vertical dans Bootstrap 4

9
Zim

sans tableau d'affichage et sans bootstrap, je préférerais le faire

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

}

http://codepen.io/matoeil/pen/PbbWgQ

3
Matoeil

Vous n'avez pas besoin de changer quoi que ce soit en CSS, vous pouvez l'écrire directement en classe et vous obtiendrez le résultat.

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

enter image description here

1
jay

Bonne réponse ppollono. Je jouais juste et j'ai eu une solution légèrement meilleure. Le CSS resterait le 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>

Cela suffirait.

1
simranjazz

Pas la meilleure façon, mais ça fonctionnera quand même

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>
0
Tarun Rawat

Je pense que le moyen le plus simple de réaliser la mise en page avec bootstrap est le suivant:

<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 je faisais était d'ajouter des couches de div qui me permettaient de centrer la div, mais comme je n'utilise pas de pourcentages, vous devez spécifier la largeur maximale de la div pour qu'elle soit centrée.

Vous pouvez utiliser cette même méthode pour centrer plus d'une colonne, il vous suffit d'ajouter plusieurs couches div:

<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") s'effondrera, vous pourrez voir les divs enfants , mais pas la couleur de fond.

0
TheOneAndOnly ME

Pour la version actuelle de Bootstrap 4.3.1, utilisez

Style

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
    height: 100%;
}
</style>

Code

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div
0
scysys