Dans une page responsive bootstrap, comment centrer un div


132

positionner un div au centre d'une page responsive

J'ai besoin de créer une page réactive en utilisant bootstrap en positionnant un div au centre d'une page comme dans la mise en page mentionnée ci-dessous.



J'ai besoin de centrer un div avec le texte (Conception réactive utilisant bootstrap) qui devrait être présent à l'intérieur d'un autre div centré col-lg-12 pleine largeur comme dans la mise en page.Ce serait utile si je peux obtenir l'exemple de code en violon
Rama Priya

Réponses:


173

MISE À JOUR pour Bootstrap 4

Alignement vertical de la grille plus simple 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 de div horizontal et vertical centré sur toutes les tailles d'écran.


41
class="col-xs-4 col-xs-offset-4"Cela pourrait peut- être suffire.
L105 du

Je dois positionner le div col-lg-12 verticalement au centre dans toutes les tailles d'écran
Rama Priya

1
J'ai trouvé la solution pour vous vérifier ce violon jsfiddle.net/Palapas/52VtD/687 le conteneur doit avoir une hauteur de 100% sinon vous devez utiliser la position absolue
ppollono

45

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


1
cette solution ne fonctionne pas lorsque j'ouvre mon site dans le mobile.
codeinprogress

2
Salut, quel navigateur utilisiez-vous? Avez-vous chargé les feuilles de style et le javascript de Bootstrap? Cela fonctionne dans Firefox et Chrome. Testé sur toutes les tailles d'écran.
vocasle

J'ai testé cela en redimensionnant mon navigateur, ainsi qu'en utilisant un vérificateur de site Web réactif. Travaille pour moi.
Rocky Kev

1
ce correctif brise les styles par défaut de bootstrap
ppollono

21

Dans bootstrap 4

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

justify-content-center

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

 align-items-center

mais n'oubliez pas d'utiliser la classe d-flex avec ceux-ci, 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>

Remarque: assurez-vous d'ajouter des utilitaires bootstrap-4 si ce code ne fonctionne pas



6

Vous n'avez pas besoin de changer quoi que ce soit dans 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>

entrez la description de l'image ici


4

sans table d'affichage et sans bootstrap, je préférerais faire ça

<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


2

Bonne réponse ppollono. Je jouais juste et j'ai eu une solution légèrement meilleure. Le CSS resterait le même, à savoir:

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.


2

Ce n'est pas le meilleur moyen, mais cela fonctionnera toujours

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

1

Je pense que le moyen le plus simple d'accomplir la mise en page 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 comme je n'utilise pas de pourcentages, vous devez spécifier la largeur maximale du div pour être au centre.

Vous pouvez utiliser cette même méthode pour centrer plus d'une colonne, il vous suffit d'ajouter plus de 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>

Remarque: que j'ai ajouté un div avec la colonne 12 pour md, sm et xs, si vous ne faites pas cela, le premier div avec la couleur de fond (dans ce cas "blueviolet") se réduira, vous pourrez voir les divs enfants , mais pas la couleur d'arrière-plan.


1

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

1

Essayez ceci, pour l'exemple, j'ai utilisé une hauteur fixe. Je pense que cela n'affecte pas le scénario réactif.

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>


1

Dans Bootstrap 4, utilisez:

<div class="d-flex justify-content-center">...</div>

Vous pouvez également changer la position en fonction de ce que vous voulez:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Référence ici



-1

La solution la plus simple sera d'ajouter une colonne vide des deux côtés comme ci-dessous:

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>

-2

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;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.