j'ai utilisé ce code très simple:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

évidemment, que vous utilisiez un .class ou un #id , le résultat ne changera pas.

maintenant que le support flexbox augmente, ce CSS appliqué à l'élément contenant centrerait verticalement l'élément contenu:

.container {        
    display: flex;
    align-items: center;
}

utilisez la version préfixée si vous avez également besoin de cibler Explorer 10, et les anciens (<4.4) navigateurs Android:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Il a travaillé pour moi:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

une technique d'un ami à moi:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DÉMO ici

tous ces éléments doivent être alignés verticalement au sein de la division 151980920"

aligné comment ? Tops des images aligné avec le haut du texte?

une des images doit être absolument positionnée au sein de la div.

absolument positionné par rapport à la DIV? Pourriez-vous esquisser ce que vous cherchez...?

fd a décrit les étapes pour le positionnement absolu, ainsi que l'ajustement de l'affichage de l'élément H1 de sorte que les images apparaissent en ligne avec elle. À cela, je vais ajouter que vous pouvez aligner les images en utilisant le vertical-align style:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

...ce serait mettre l'en-tête et les images ensemble, avec les bords supérieurs alignés. D'autres options d'alignement existent; voir la documentation . Vous pouvez également trouver avantageux de laisser tomber le DIV et déplacer les images à l'intérieur de l'élément H1 - cela fournit une valeur sémantique au conteneur, et supprime la nécessité d'ajuster l'affichage du H1 :

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

pour positionner les éléments de bloc au centre (fonctionne dans IE9 et au-dessus), a besoin d'une enveloppe div :

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

utilisez cette formule, et il fonctionnera toujours sans fissures:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

presque toutes les méthodes doivent spécifier la hauteur, mais souvent nous n'avons pas de hauteurs.

Voici donc un truc CSS3 3 line qui ne nécessite pas de connaître la hauteur.

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

il est supporté même dans IE9.

avec ses préfixes de vendeur:

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

Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css /

mon truc est de mettre à l'intérieur de la div une table avec 1 rangée et 1 colonne, mettre 100% de la largeur et la hauteur, et la propriété vertical-align:middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q /

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

par défaut h1 est un élément de bloc qui sera affiché sur la ligne après le premier img, et fera apparaître le second img sur la ligne qui suit le bloc.

pour empêcher que cela se produise, vous pouvez régler le h1 pour avoir un comportement d'écoulement en ligne:

#header > h1 { display: inline; }

quant au positionnement absolu de l'img à l'intérieur de la div , vous devez définir la div contenant pour avoir une" taille connue " avant que cela ne fonctionne correctement. Dans mon expérience, vous devez également changer l'attribut position loin de la position par défaut-position: relative works for me:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Si vous pouvez obtenir que cela fonctionne, vous pouvez essayer de supprimer progressivement la hauteur, la largeur, la position des attributs de div.l'en-tête pour obtenir le minimum d'attributs requis pour obtenir l'effet que vous voulez.

mise à jour:

Voici un exemple complet qui fonctionne sur Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

en utilisant CSS à centre vertical, vous pouvez laisser les conteneurs extérieurs agir comme une table, et le contenu comme une cellule de table. Dans ce format, vos objets resteront centrés. :)

a imbriqué plusieurs objets dans JSFiddle pour un exemple, mais l'idée de base est la suivante:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

exemple d'objets multiples:

HTML

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

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

résultat

https://jsfiddle.net/martjemeyer/ybs032uc/1 /

nous pouvons utiliser un calcul de la fonction CSS pour calculer la taille de l'élément et ensuite positionner l'élément enfant en conséquence.

exemple HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

et CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Démo créée ici: https://jsfiddle.net/xnjq1t22 /

Cette solution fonctionne bien avec responsive div height et width ainsi.

Note: la compatibilité de la fonction calc avec les anciens navigateurs n'est pas vérifiée.

il suffit d'utiliser une table à une cellule à l'intérieur de la div! Il suffit de régler la hauteur de la cellule et de la table et à 100% et vous pouvez utiliser le vertical-align.

une table unicellulaire à l'intérieur de la div gère l'alignement vertical et est compatible avec l'arrière à l'Âge de Pierre!

comme aujourd'hui, j'ai trouvé une nouvelle solution pour aligner verticalement plusieurs lignes de texte dans une div en utilisant CSS3 (et j'utilise aussi bootstrap v3 grid system pour embellir L'interface utilisateur), qui est comme ci-dessous:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

d'après ce que j'ai compris, le parent immédiat d'un texte contenant un élément doit avoir une certaine hauteur. J'espère que ça va vous aider trop. Merci!

j'utilise la solution suivante (sans positionnement et sans hauteur de ligne) depuis plus d'un an, elle fonctionne aussi 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>

C'est ma solution personnelle pour un je de l'élément à l'intérieur d'un div

JSFiddle Exemple

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

pour moi, ça a marché comme ça:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

l'élément "a"converti en un bouton, en utilisant les classes Bootstrap, et il est maintenant centré verticalement à l'intérieur d'une" div " externe.

Mise À Jour - Bootstrap-4

centrer les éléments de l'enfant verticalement et horizontalement

pour vertical: d-flex align-items-center

pour horizontal: d-flex justify-content-center

.width-height {
    height: 180px;width:100%"
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info width-height">
  <div class="bg-light p-2">I am in Center</div>
</div>

pour en savoir plus, consultez la documentation getbootstrap.com/docs/4.0/utilities/flex / , il existe plusieurs méthodes pour centrer les éléments.

juste ceci:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

une table unicellulaire à l'intérieur de la div gère l'alignement vertical et est compatible avec l'arrière de retour à L'Âge de Pierre!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Voici juste une autre approche (réactive):

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz /

je suis un gars de .NET qui vient d'entrer dans la programmation web. Je n'ai pas utilisé CSS (enfin, un peu). J'ai utilisé un peu de JavaScript pour accomplir le centrage vertical avec jQuery .fonction css.

je viens de poster tout de mon test. Ce n'est probablement pas trop élégant, mais ça marche jusqu'ici.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

<div id="header" style="display: table-cell; vertical-align:middle;">

...

ou CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Couverture Par Navigateur