Zusammenfassung der Probleme im Zusammenhang mit der horizontalen und vertikalen Zentrierung der html_HTML/Xhtml_Web-Seitenproduktion

Ich bin in letzter Zeit auf viele Zentrierprobleme gestoßen, deshalb habe ich mir die Zeit genommen, sie hier zusammenzufassen, damit sie in Zukunft leicht gefunden werden können

1. Zentrierter Text

Code kopieren

Code als folgt:

Ich bin in der Mitte...

.. height line-height text -center（ Kann nur eine einzelne Zeile zentrieren)
.wrap{
width:px;
border:px solid red;
line-height: px;
}

ps:text-align:center zentriert nur die Inline-Elemente unter dem Element
1.2display: Tabellenzelle (Mehrere Zeilen mit fester Höhe in der Mitte)

Code kopierenDer Code lautet wie folgt:

.wrap{

width:px;
border:px solid red;
display:table- cell;
Vertical- align: middle;
}


display:table-cell: Funktioniert nicht in ie67, es ist am besten, es zusammen mit display:table;
ie67: (Es wird in Zukunft nicht mehr verwendet. , aber setzen wir es hier ein)

Methode 1: (Die Höhe des em-Tags ist gleich der Höhe von das übergeordnete Element, daher entspricht die Zentrierung von span und em der Zentrierung von span auf dem übergeordneten Element)


Code kopieren

The Der Code lautet wie folgt:

Ich bin in der Mitte... Ich bin in der Mitte... Ich bin in der Mitte... Ich bin in der Mitte...

.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
.wrap span{
Vertical-align: middle;
display:inline-block;
width:px;
.wrap em{
height:%;
Vertical-align: middle; inline-block;
}




Methode 2: (Durch Hinzufügen eines absolut positionierten übergeordneten Tags zum untergeordneten Element und anschließendes Anpassen der relativen Positionierung des untergeordneten Elements, um es horizontal und vertikal zu zentrieren)

Code kopieren
Der Code lautet wie folgt:

< ;span class="span"> ; Ich bin in der Mitte... Ich bin in der Mitte... Ich bin in der Mitte... Ich bin in der Mitte middle...

.wrap{

width:px;

border: px durchgehend rot;
display:table;
position:relative;
overflow: versteckt;
}
.wrap .span{
display:table-cell; -align: middle;
text-align: center;
*position: absolute;
top:%;
left:%;
}
.wrap .span{
*position:relative;
oben:- %;
links:- %;
}




1.3 Polsterung (natürlich Innenpolsterung)

Code kopieren

Der Code lautet wie folgt:

.wrap{

width:px;

border:px solid red; padding:px ; }

2. Zentriertes Element

Code kopieren Der Code lautet wie folgt:

2.1Position: absoluter negativer Rand (Breite und Höhe müssen zur Berechnung des Randes verfügbar sein)

Code kopieren

Der Code lautet wie folgt:

.wrap{
width:px;
position:absolute;
left:%; :-px;
margin-left:-px;
border:px solid red;
}
.wrap span{
width:px; > background:red;
position: absolute;
left:%;
margin-left:-px;
}




ps: CSS implementiert die horizontale und vertikale Zentrierung von DIVs

Code kopieren

Code Wie folgt:

>