Heim >Web-Frontend >CSS-Tutorial >[CSS] Positionierungselemente werden in der Mitte angezeigt

[CSS] Positionierungselemente werden in der Mitte angezeigt

高洛峰
高洛峰Original
2017-02-22 13:47:201426Durchsuche

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
Vorheriger Artikel:CSS ausgerichtetNächster Artikel:CSS ausgerichtet