Centrer une balise H1 dans un DIV

Question

J'ai le DIV suivant dans une balise body :

 <div id="AlertDiv"><h1>Yes</h1></div>

Et voici leurs classes CSS :

 #AlertDiv {
    position:absolute;
    height: 51px;
    left: 365px;
    top: 198px;
    width: 62px;
    background-color:black;
    color:white;
}

#AlertDiv h1{
    margin:auto;
    vertical-align:middle;
}

Comment puis-je aligner verticalement et horizontalement H1 à l'intérieur de DIV ?

AlertDiv sera plus grand que H1.

Answer 1

Vous pouvez ajouter line-height:51px à #AlertDiv h1 si vous savez que ce ne sera jamais qu'une seule ligne. Ajoutez également text-align:center à #AlertDiv .

 #AlertDiv {
    top:198px;
    left:365px;
    width:62px;
    height:51px;
    color:white;
    position:absolute;
    text-align:center;
    background-color:black;
}

#AlertDiv h1 {
    margin:auto;
    line-height:51px;
    vertical-align:middle;
}

La démo ci-dessous utilise également des marges négatives pour garder le #AlertDiv centré sur les deux axes, même lorsque la fenêtre est redimensionnée.

Démo : jsfiddle.net/KaXY5

Answer 2

Sur la balise hX

 width: 100px;
margin-left: auto;
margin-right: auto;

Answer 3

Vous pouvez ajouter du rembourrage au h1 :

 #AlertDiv h1 {
  padding:15px 18px;
}

Answer 4

<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;">
    <h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1>
</div>

Vous pouvez essayer le code ici :

http://htmledit.squarefree.com/