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.

css twitter-bootstrap responsive-design

— Rama Priya
source

stackoverflow.com/questions/9554724/…

— Kenny Thompson

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

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>

Développer l'extrait

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>

Développer l'extrait

C'est un exemple simple de div horizontal et vertical centré sur toutes les tailles d'écran.

— ppollono
source

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

— vocasle
source

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

11

Mise à jour pour Bootstrap 4

Maintenant que Bootstrap 4 est une flexbox, l'alignement vertical est plus facile. Étant donné un div de flexbox pleine hauteur, juste nous my-autopour les marges supérieures et inférieures égales ...

<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

— Zim
source

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>

— Geai
source

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

— Matoeil
source

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.

— Simranjazz
source

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>

— Tarun Rawat
source

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.

— TheOneAndOnly ME
source

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>

Développer l'extrait

— sanka sanjeeva
source

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

— Wariored
source

-1

Voici des règles CSS simples qui placent n'importe quel div au 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/

— Sravan
source

Pourriez-vous développer votre réponse? Les liens ont tendance à devenir obsolètes avec le temps.

— orique

2

De plus, ce n'est pas la «méthode bootstrap» pour y parvenir.

— FuriousFolder

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

— Yuvraj Patil
source

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

— rbsthlm
source

Dans une page responsive bootstrap, comment centrer un div

jsFiddle