Zentrieren Sie ein tag innerhalb a

Question 1

Ich habe folgendes <div> in einem <body> Schild:

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

Und das sind ihre CSS-Klassen:

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

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

Wie kann ich vertikal und horizontal ausrichten an <h1> innerhalb von a <div>?

AlertDiv wird größer sein als <h1>.

Question 2

Du kannst hinzufügen line-height:51px zu #AlertDiv h1 wenn Sie wissen, dass es immer nur eine Zeile sein wird. Auch hinzufügen text-align:center zu #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;
}

Die folgende Demo verwendet auch negative Margen, um die #AlertDiv auf beiden Achsen zentriert, auch wenn die Größe des Fensters geändert wird.

Demo: jsfiddle.net/KaXY5

Question 3

Auf dem hX-Tag

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

Question 4

Es gibt einen neuen Weg, Transformationen zu verwenden. Wenden Sie dies auf das zu zentrierende Element an. Es stupst um die halbe Containerhöhe nach unten und „korrigiert“ dann um die halbe Elementhöhe.

position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);

Es funktioniert die meiste Zeit. Ich hatte ein Problem, wo a div war in einem div in einem li. Das Listenelement hatte eine festgelegte Höhe und die äußere divs aus 3 Säulen (Stiftung). Die Divs der 2. und 3. Spalte enthielten Bilder und ließen sich mit dieser Technik gut zentrieren, jedoch benötigte die Überschrift in der ersten Spalte ein umschließendes Div mit einer explizit festgelegten Höhe.

Weiß jemand, ob die CSS-Leute an einer Möglichkeit arbeiten, Dinge einfach auszurichten? Als ich sah, dass es 2014 ist und sogar einige meiner Freunde regelmäßig das Internet nutzen, fragte ich mich, ob jemand schon in Betracht gezogen hatte, dass die Zentrierung ein nützliches Styling-Feature wäre. Also nur wir?

Question 5

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

Du kannst den Code hier ausprobieren:

http://htmledit.squarefree.com/

Question 6

Gestartet a jsFiddle hier.

Es scheint die horizontale Ausrichtung arbeitet mit einem text-align : center. Ich versuche immer noch, die vertikale Ausrichtung zum Laufen zu bringen; vielleicht verwenden müssen absolute positionieren und so top: 50% oder eine vorberechnete padding von oben.

Question 7

Sie könnten Polsterung hinzufügen h1:

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

Question 8

Sie können verwenden display: table-cell um das div als Tabellenzelle zu rendern und dann zu verwenden vertical-align wie Sie es in einer normalen Tabellenzelle tun würden.

#AlertDiv {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Du kannst es hier versuchen:
http://jsfiddle.net/KaXY5/424/