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 <div>élément 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é, juste un enfant spécifique.

Défini 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 presque tout.
http://howtocenterincss.com/

En fait, c'est très simple avec les boîtes flex CSS3 .

.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 va centrer tous les éléments internes (sans chevauchement entre eux), mais l' OP veut juste qu'un élément spécifique soit centré , pas les autres éléments internes. La deuxième méthode de @Warface answer est donc 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>

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/

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

Pour centrer uniquement 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 également 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>

Vous pouvez utiliser le nom de la classe bootstrap flex comme ça:

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

Cela fonctionnera même avec un certain nombre d'éléments à l'intérieur.

Le div est-il une largeur fixe ou une largeur fluide? Dans tous les cas, pour une largeur fluide, vous pouvez utiliser:

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

Ou vous pouvez définir le div parent sur text-align:center;et le div enfant sur text-align:left;.

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

#parent {
width:500px;
}

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

donne juste le div parent position: relative

Si vous souhaitez utiliser CSS3:

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

Vous voudrez peut-être faire des recherches supplémentaires pour déterminer comment obtenir le pourcentage correspondant à la largeur de votre élément.

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

Une solution possible parmi tant d'autres 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 div à centrer est positionné relativement, vous pouvez simplement faire

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

à gauche: 50% fonctionne de manière résective au parent le plus proche avec une largeur statique attribuée. Essayez width: 500px ou quelque chose sur la div parent. Vous pouvez également créer le contenu dont vous avez besoin pour centrer l'affichage: bloquer et définir les marges gauche et droite sur auto.

Si l'élément enfant est en ligne (par exemple pas a div, tableetc.), je l'envelopperai dans un divou un pet je rendrai la propriété css alignée du texte du wrapper é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 a divou a p) avec une largeur fixe, je définirais ses propriétés css de marge gauche et droite 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 centrer également son contenu.

Je ne vais pas me soucier du positionnement car à mon humble avis, ce n'est pas la voie à suivre pour le problème des OP, mais assurez-vous de vérifier ce lien , très utile.

Créez un nouvel élément div pour votre élément à centrer, puis ajoutez une classe spécifiquement pour centrer cet élément comme ceci

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

Css

.centered{
    text-align:center;
}

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 div de contenu chaque fois que votre conteneur est plus grand ou plus petit. Dans ce cas, votre contenu doit être plus grand que 1100% du conteneur pour ne pas être centré, mais dans ce cas, vous pouvez faire avec of containerSecond plus grand, et cela fonctionnera

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

par exemple, j'ai un article div qui se trouve à l'intérieur d'un div de contenu principal. À l'intérieur de l'article il y a une image et sous cette image se trouve un bouton, style comme celui-ci:

.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 centrer l'image * /

.article img {

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

}

/ * Maintenant, sous cette image dans le même élément d'article, il devrait y avoir un bouton comme read more Bien sûr, vous devez travailler avec em ou% lorsqu'il est dans un design réactif * /

.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

Si vous souhaitez centrer des éléments à l'intérieur d'un div 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 voir Outer div est un conteneur Flex et Inner doit être l'é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.

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>

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