Wie zu kompensieren, links, oben, unten, rechts in CSS

Question

Ich habe sehr hart gesucht und ich sehe viele Beispiele, wo Menschen haben oder oben oder so etwas bei 50%, und ich würde erwarten, dass würde ausreichend sein, um etwas zu zentrieren, aber das ist nicht der Fall.

Manchmal, wenn ich links 50% für etwas, das div sieht aus, als ob es etwas mehr ist als das (relativ zum Browser). Also haben sie negative Margen und ich frage mich nur, woher weißt du, welche Werte zu setzen sind, um die Elemente zu zentrieren, und welche Eigenschaft für Position müsste ich setzen? Ich verstehe einfach nicht, warum Position: relativ und links: 50% wird nicht mein Div in die Mitte der Seite gehen.

Answer 1

Wenn Sie links anwenden: 50% ist in der Tat die linke Kante Ihres Elements, das zentriert ist. Nicht die Mitte deines Elements. anwenden margin: auto; zu deinem Element, um es zu zentrieren.

Answer 2

Manchmal wenn ich 50% für etwas lege, sieht das div so aus, als ob es etwas mehr ist (relativ zum Browser).

Positioniert die linke Kante am 50% -Punkt.

Also dann haben sie negative Margen und ich frage mich nur, wie Sie wissen, was in Ordnung zu bringen Werte, die Elemente zum Zentrum

Hälfte, was auch immer die width ist

Welche Eigenschaft für Position müsste ich setzen?

Diese Technik wird allgemein angenommen absolute Positionierung

---

Ich verstehe einfach nicht, warum position: relative und links: 50% wird nicht meine div in der Mitte der Seite gehen machen.

Die relative Positionierung versetzt das Element aus seiner statischen Position. Wenn Sie versuchen, etwas mit der relativen Positionierung zu zentrieren, sollten Sie den linken und rechten Rand normalerweise auf setzen (und die Positionierung als static belassen).

Answer 3

Wenn die absolute Positionierung ein Element mit top, right, bottom und left Sie es eine gewisse Distanz in Bewegung sind aus, dass Elemente Kanten. Es wird es in Bezug auf das zuletzt positionierte Element verschieben. Das letzte Positionselement ist das nächste Vorfahrelement, für das über CSS eine beliebige Positionierung angewendet wird. Wenn kein Vorfahrelement als Positionierungssatz festgelegt ist, wird das Ansichtsfenster als Referenz verwendet.

Ich habe ein schnelles Diagramm erstellt, um zu zeigen, was vor sich geht.

left: 50%; bewegt sich der linke Rand des Elements 50% (die Hälfte) der Breite der letzten linken Kante des positioniertes Element. Sie verschieben Elemente auf der rechten Seite, indem Sie den Abstand zwischen den linken Kanten des Elements erhöhen.

margin-left: <negative value>; wird auf die Hälfte der Elementbreite gesetzt und zieht sie nach links zurück. Dies behebt das Off-Center-Problem, das Sie sehen.

Heute werden viele Menschen mit margin-left mit einem negativen Wert verzichten und sich für transform: translateX(-50%); entscheiden. Dies ermöglicht ihnen, flexibler zu sein, da die Breite der Elemente nicht bekannt sein muss.

Die CSS für transform: translateX(-50%); könnte wie folgt aussehen:

JSFiddle

div { 
    position: absolute; 
    left: 50%; 
    border: 2px dashed red; 
    width: 200px; 
    height: 100px; 
    transform: translateX(-50%); 
} 

Demo.

Wenn Sie nur etwas horizontal zentrieren möchten und eine Breite angewendet haben (px, %, usw.), können Sie margin: 0 auto; width: <width value>; verwenden. Eine Breite muss eingestellt sein, damit margin: 0 auto; funktioniert!

Beispiel:

div { 
    margin: 0 auto; 
    width: 25%; 
    height: 100px; 
    border: 2px dashed red; 
} 

Demo JSFiddle.

Answer 4

Dies liegt daran, dass es die obere linke Ecke um 50% positioniert. sollten Sie die Verwendung translate:

.centered { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    // this moves the center of centered item to 50% 
}