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

la source

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

la source

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

Dans une page responsive bootstrap, comment centrer un div

Réponses:

jsFiddle