web-dev-qa-db-fra.com

CSS: élément central dans un élément <div>

Pour centrer un élément HTML, je peux utiliser le CSS left: 50%;. Cependant, cela centre l'élément par rapport à la fenêtre entière.

J'ai un élément qui est un enfant d'un élément <div> et je veux centrer l'enfant par rapport à ce parent <div>, pas la fenêtre entière.

Je ne veux pas que le conteneur <div> ait tout son contenu centré, uniquement l’enfant spécifique.

Comment puis je faire ça?

css
140
Randomblue

Définissez text-align:center; sur le div parent et margin:auto; sur le div enfant.

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}
.left {
    margin:auto auto auto 0;
    background-color:red;
}
.right {
    margin:auto 0 auto auto;
    background-color:yellow;
}
<div id="parent">
    <div id="child1" class="block center">
        a block to align center and with text aligned left
    </div>
    <div id="child2" class="block left">
        a block to align left and with text aligned left
    </div>
    <div id="child3" class="block right">
        a block to align right and with text aligned left
    </div>
</div>

C'est une bonne ressource pour centrer principalement n'importe quoi.
http://howtocenterincss.com/

225
pasine

En réalité, c'est très simple avec CSS3 flex box .

.flex-container{
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  
  justify-content: center;
  align-items: center;
  
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}
<div class="flex-container">
  <div class="inner-element"></div>
</div>

METTRE À JOUR:

Il semble que je n’ai pas lu l’édition OP au moment où j’ai écrit cette réponse. Le code ci-dessus centre tous les éléments internes (sans les superposer), mais le OP souhaite que seul un élément spécifique soit centré, pas les autres éléments internes. Donc, la seconde méthode @Warface answer est plus appropriée, mais elle nécessite toujours un centrage vertical:

.flex-container{
  position: relative;
  
  /* Other styling stuff */
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  position: absolute;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%,-50%);
  /* or 3d alternative if you will add animations (smoother transitions) */
  transform: translate3d(-50%,-50%,0);

  /* Other styling stuff */
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}
<div class="flex-container">
  <p>Other inner elements like this follows the normal flow.</p>
  <div class="inner-element"></div>
</div>

36
Gerard Reches

CSS 

  body{
    text-align:center;
    }
    .divWrapper{
    width:960px //Change it the to width of the parent you want
    margin: 0 auto;
    text-align:left;
    }

HTML

<div class="divWrapper">Tada!!</div>

Cela devrait centrer la div

2016 - Méthode HTML5 + CSS3

CSS

div#relative{
  position:relative;
}

div#thisDiv{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

HTML

<div id="relative">
  <div id="thisDiv">Bla bla bla</div>
</div>

Fiddledlidle

https://jsfiddle.net/1z7m83dx/

9
Warface

text-align:center; sur le parent div devrait faire l'affaire

4
Kevin Bowersox

La div est-elle une largeur fixe ou une largeur fluide? De toute façon, pour la largeur du fluide, vous pouvez utiliser:

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

Vous pouvez également définir la division parent sur text-align:center; et la division enfant sur text-align:left;.

Et left:50%; le centre uniquement en fonction de la page entière lorsque div est défini sur position:absolute;. Si vous définissez la div sur left:50%;, il devrait le faire par rapport à la largeur de la div parente. Pour une largeur fixe, procédez comme suit:

#parent {
width:500px;
}

#child {
left:50%;
margin-left:-100px;
width:200px;
}
2
Purag

il suffit de donner à la div parent position: relative

2
stephenmurdoch
<html>
<head>
</head>
<style>
  .out{
    width:200px;
    height:200px;
    background-color:yellow;
  }
   .in{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:50%;
    margin-left:50%;
    transform:translate(-50%,50%);
  }
</style>
  <body>
     <div class="out">
     <div class="in">

     </div>
     </div> 
  </body>
</html>
0
SooRaj Patil

Si l'élément enfant est en ligne (par exemple, pas une div, table etc.), je l'envelopperais dans une div ou une p et ferais en sorte que la propriété CSS alignée soit égale à center.

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

Sinon, si l'élément est un bloc (display: block, par exemple une div ou une p) avec une largeur fixe, je définirais ses propriétés de marge gauche et droite de css sur auto.

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

Vous pouvez bien sûr ajouter un text-align: center à l'élément wrapper pour que son contenu soit également centré.

Je ne m'embêterai pas à me positionner car IMHO n'est pas la solution au problème des PO mais assurez-vous de vérifier ce lien out, très utile.

0
Spyros

par exemple, j'ai un article div qui est à l'intérieur d'un div principal du contenu .. À l'intérieur de l'article il y a une image et en dessous de cette image est un bouton, style comme ceci:

.article {

width: whatever;
text-align: center; 
float: whatever (in case you got more articles in a row); 
margin: give it whatever margin you want;

} . article {

}

/ * dans l'article je veux que l'image soit centrée * /

.article img {

float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;

}

/ * Maintenant sous cette image dans le même article, il devrait y avoir un bouton comme en savoir plus Bien sûr vous devez travailler avec em ou% quand il est dans un design responsive * /

.bouton {

background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/

}

Bonne chance

0
Hylke

J'ai trouvé une autre solution 

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-500%; 
        width:1100%;
     }
     .content{
        width: 800px; //your content size 
        margin:0 auto;
     }           
</style>

et dans le corps 

<div class="container">
   <div class="containerSecond">
       <div class="content"></div>
   </div>
</div>

Cela centrera votre contenu div chaque fois que votre conteneur est plus grand ou plus petit. Dans ce cas, votre contenu doit contenir plus de 1 100% du conteneur pour ne pas être centré, mais dans ce cas, vous pouvez créer un conteneur plus grand, et cela fonctionnera

0
Ruben

Si vous voulez utiliser CSS3:

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

Vous voudrez peut-être effectuer d'autres recherches pour savoir comment obtenir le pourcentage correspondant à la largeur de votre élément.

0
user3178128

Ce post fournit une bonne solution - http://mindthesemicolon.com/how-to-center-an-element-vertically- and-horizontally-using-css/ Placez l’enfant en position absolue . 2. Définissez le parent sur position relative . 3. Réglez la gauche et le haut de l'enfant à 50% . 4. traduire (-50%, - 50%) pour décaler gauche et haut de la moitié de la largeur de l'élément enfant.

0
Barry

Pour ne centrer que l'enfant spécifique:

.parent {
  height: 100px;
  background-color: gray;
  position: relative;
}

.child {
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 20px;
  height:20px;
  margin: auto;

}
<div class="parent">
   <span class="child">hi</span>
</div>

OU vous pouvez aussi utiliser flex, mais cela centrerait tous les enfants

.parent {
  height: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: white;  
}
<div class="parent">
   <span class="child">hi</span>
</div>
0
Ayan

le mien aimerait la magie. 

html, body {
 height: 100%;
}

.flex-container{
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}


<div class="flex-container">
  <div>Content</div>
</div>
0
Azizi Musa

Assignez text-align: center; au parent et display: inline-block; au div.

0
koulikoff

Créez un nouvel élément div que votre élément doit centrer, puis ajoutez une classe spécialement pour le centrer comme ceci

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

Css

.centered{
    text-align:center;
}
0
Squeeky91

left: 50% travaillent respectivement vers le parent le plus proche avec une largeur statique assignée. Essayez la largeur: 500px ou quelque chose sur div parent. Vous pouvez également afficher le contenu dont vous avez besoin pour centrer: bloquer et définir les marges gauche et droite sur auto.

0
Bardt

Tout d’abord, vous pouvez le faire avec la gauche: 50% pour le centrer par rapport à la division parent mais pour cela, vous devez apprendre le positionnement CSS.

Une solution possible parmi beaucoup est de faire quelque chose comme

    div.parent { text-align:center; }    //will center align every thing in this div as well as in the children element
    div.parent div { text-align:left;}   //to restore so every thing would start from left

si votre votre div à être centré est positionné relativement, vous pouvez simplement faire

    .mydiv { position:relative; margin:0 auto; }
0
Ehtesham

Si vous souhaitez centrer des éléments dans une division et que vous ne vous souciez pas de la taille de la division, vous pouvez utiliser Flex power. Je préfère utiliser flex et n'utilise pas la taille exacte des éléments. 

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

Comme vous pouvez le constater, Outer div est un conteneur Flex et Inner doit être un élément Flex spécifié avec flex: 1 1 auto;. Pour mieux comprendre, vous pouvez voir cet exemple simple. http://jsfiddle.net/QMaster/hC223/

J'espère que cette aide.

0
QMaster