Centrage vertical d'un div à l'intérieur d'un autre div

Une Autre façon de réaliser ce centrage horizontal et vertical est:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

(Référence)

Une Autre façon est d'utiliser Transformer Traduire

Div Extérieure doit définir sa position à relative ou fixed, l'Intérieur de la Div doit définir sa position pour absolute, top et left à 50% et appliquer un transform: translate(-50%, -50%).

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}

<div class="cn">
    <div class="inner">
        test
    </div>
</div>

Testé dans:

• Opéra de 24,0 (minimum 12.1)
• Safari 5.1.7 (minimum 4 avec -webkit - préfixe)
• Firefox 31.0 (minimum 3.6 avec-MOZ-prefix, à partir de 16 sans préfixe)
• Chrome 36 (minimum 11 avec-WebKit-prefix, à partir de 36 sans préfixe)
• IE 11, 10 (minimum 9 avec-MS-prefix, à partir de 10 sans préfixe)
• plus de navigateurs, Puis-je utiliser?

Aligner verticalement N'importe quoi avec seulement 3 lignes de CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

Le plus simple

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

Selon shouldiprefix ce sont les seuls préfixes vous avez besoin d'

Vous pouvez également utiliser % comme valeur pour la propriété' height ' de .parent-of-element, tant que le parent de l'élément a une hauteur ou un contenu qui étend sa taille verticale.

Au lieu de me lier dans un noeud avec des CSS difficiles à écrire et difficiles à maintenir(cela nécessite également une validation croisée minutieuse!) Je trouve beaucoup mieux d'abandonner CSS et d'utiliser à la place du HTML 1.0 merveilleusement simple:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

Cela accomplit tout ce que l'affiche originale voulait, et est robuste et maintenable.

Personnellement, je préfère l'astuce d'utiliser un pseudo-élément caché pour couvrir toute la hauteur du conteneur externe, et l'aligner verticalement avec l'autre contenu. Chris Coyier a un bel article sur la technique. http://css-tricks.com/centering-in-the-unknown/ L'énorme avantage de ceci est l'évolutivité. Vous n'avez pas besoin de connaître la hauteur du contenu ou de vous inquiéter de sa croissance/diminution. Cette solution évolue :).

Voici un violon avec tout le CSS dont vous aurez besoin et un exemple de travail. http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}

Lorsque votre height n'est pas défini (auto); vous pouvez donner à inner div un peu de remplissage (en haut et en bas) pour le centrer verticalement:

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>

#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }

<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

Vous pouvez le faire en ajoutant simplement le style CSS mentionné ci-dessus. Le meilleur de tous. pour la requête écrire un commentaire

Centrage vertical des éléments div à l'intérieur d'un autre div

Définissez simplement le conteneur sur display:table, puis les éléments internes sur display:table-cell. Définissez un height sur le conteneur, puis définissez vertical-align:middle sur les éléments internes. Cela a une large compatibilité aussi loin que les jours D'IE9.

Notez simplement que l'alignement vertical dépendra de la hauteur du conteneur parent.

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}

<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>

J'utilise la solution suivante depuis plus d'un an, cela fonctionne également avec IE 7 et 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

Cela fonctionne pour moi. La largeur et la hauteur du div externe peuvent être définies.

Voici le code:

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}

<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>

Lien de violon http://jsfiddle.net/dGHFV/2515/>

Essayez cette

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }

Si vous n'avez toujours pas compris après avoir lu les merveilleuses réponses données ci-dessus.

Voici deux exemples simples de la façon dont vous pouvez y parvenir.

Utilisation de l'affichage: table-cell

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}

<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

À l'Aide de flex-zone (display: flex)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}

<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

Remarque: Vérifiez la compatibilité du navigateur de display: table-cell et flex avant d'utiliser les implémentations mentionnées ci-dessus.

Entrez la description de l'image ici 100% il fonctionne

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

Https://jsfiddle.net/Mangesh1556/btn1mozd/4/

Pour innerdiv qui ne spécifie pas sa valeur de hauteur, il n'y a pas de solution CSS pure pour le rendre centré verticalement.une solution javascript pourrait être obtenir le offsetHeight de innerdiv, puis calculer le style.marginTop.

Vous pouvez le faire avec un simple bloc javascript (jQuery).

CSS:

#outerDiv{
    height:100%;
}

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

Essayez d'aligner l'élément interne comme ceci:

top: 0;
bottom: 0;
margin: auto;
display: table;

Et bien sûr:

position: absolute;

Vous pouvez centrer le div verticalement et horizontalement en CSS en utilisant flex;

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

Et le second est comme suit;

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

Et le HTML résultant:

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>

Cela fonctionnera à IE6!

<!DOCTYPE html> est requis sur IE6 aussi! [ forcera également le mode strict par défaut IE6 ].

(Bien sûr, la coloration de la boîte est à des fins de démonstration seulement )

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}

<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>

Text align-center sur l'élément parent, display inline-block sur l'élément enfant. Cela centrera tout le plus quoi que ce soit. Je crois que son appel un "flotteur de bloc".

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

C'est aussi une bonne alternative pour les flotteurs, bonne chance!

Centrer verticalement un div dans un autre div

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  
  background-color: grey;
}

<div id="outerDiv">
  <div id="innerDiv"></div>
</div>

Pour aligner verticalement et horizontalement:

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}

Je sais que cette question a été créée il y a un an... Quoi qu'il en soit merci CSS3 vous pouvez facilement aligner verticalement div dans div (exemple là http://jsfiddle.net/mcSfe/98/)

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
}