1. Verwenden Sie die Marge
p {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;}
zur Analyse
:
oben: 50 %; links oben im übergeordneten Element zentrieren margin-top: -50px; left: -50px ;Versetze das Element nach oben und rechts um die Hälfte seines Abstands 2. Verwende Translate
p {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}
Analyse
:
oben links: 50 %; zentrieren Sie die obere linke Seite des Elements vertikal und horizontal im übergeordneten Element transform: translator(-50%, -50%); Verschieben Sie das Element um die Hälfte seines Abstands nach oben und nach rechts -
3. Alle vier Richtungen sind 0, verwenden Sie den Rand zur Positionierung
p {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right : 0;
margin: auto;}
Analyse
:
Wenn alle vier Richtungen 0 sind, heben sie sich gegenseitig auf und das Feld wird an der Anfangsposition angezeigt Rand: automatisch ; Zentrieren Sie das Feld vertikal und horizontal Weitere Artikel zur [CSS]-zentrierten Anzeige von Positionierungselementen finden Sie auf der chinesischen PHP-Website!
Stellungnahme:Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn