Warum funktioniert top:50% in CSS nicht?

Question 1

Ich mache eine Website und versuche, vertikal zu zentrieren:

 position: absolute;
 width:1200px;
 height:600px;
 top: 50%;
 left: 50%;
 margin-left: -600px;

und mein HTML ist ein einziges div

Question 2

Verwenden von Position – Statische Höhe erforderlich

i{
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

<i>center</i>

Bearbeiten: Flex verwenden (2021-10-19)

i {
  display: flex;
  align-items: center; /* vertical centering if flex-direction: row */
  justify-content: center; /* horizontal centering if flex-direction: row */

  /* extra styles */
  background-color: limeGreen;
  min-height: 160px;
}

<i>center</i>

enter code here

Question 3

Um deine Frage zu beantworten warum top: 50% funktioniert nicht, wenn Sie Eigentum verwenden top Bei einem Element muss für das übergeordnete Element dieses Elements eine statische Höhe festgelegt werden. Das sollte drin sein px oder eine andere Einheit als Prozent. Wenn Sie wirklich auch Prozent in Ihrem Elternteil verwenden müssen, können Sie zum nächsten Elternteil (das das Elternteil dieses Elternteils ist) übergehen und diesem eine feste statische Höhe geben.

Alles vertikal zentrieren. Ich bevorzuge diese Methode

Die Verwendung von CSS transform da Sie nicht wissen müssen, welche Breite oder Höhe Ihr Element hat.

position: relative;
top: 50%;
left: 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%);

Vergessen Sie nicht, Browser-/Anbieterpräfixe hinzuzufügen.

Sie können sich hier auf Herstellerpräfixe beziehen.

Wenn Sie die Größe Ihrer Eltern nicht kennen. Sie haben zwei Möglichkeiten:

Verwenden Sie JavaScript, nehmen Sie die natürliche Höhe des übergeordneten Elements und setzen Sie dann die Eigenschaft height dieses übergeordneten Elements auf den Wert, den Sie gerade genommen haben. Sie können diese Methode verwenden, wenn die Höhe des übergeordneten Elements durch ein anderes untergeordnetes Element verursacht wird, das dem Element, das Sie zentrieren, gleichgeordnet ist.

$('.parent').height( $(this).height() );

.parent {
  /* Unkown height */
}

.child {
  /* Create columns */
  width: 50%;
  float: left;
}

.child-1 {
  position: relative;
  top: 50%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Example Start -->
<div class="parent">
  <div class="child child-1">
    Lorem ipsum
  </div>  
  <div class="child child-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Tipp: Wenn Sie Responsive in Betracht ziehen, legen Sie die Höhe einfach erneut in JavaScript fest, wenn Sie die Größe des Browsers ändern. Sie können die neue natürliche Höhe erhalten, indem Sie die Höhe in JavaScript auf automatisch setzen und den Vorgang wiederholen.

Sie können die obigen Ideen abkratzen und die Zentrierung mit verwenden display: table stattdessen. CSS-Tricks hat hier ein sehr gutes Beispiel.

Question 4

Die CSS-Eigenschaft top funktioniert genau so left. Es schiebt das div aus dieser Richtung. Wenn du schreibst top:50%das div wird um 50 % von oben nach unten gedrückt. Sie möchten, dass es vertikal zentriert ist, also müssen Sie dem entgegenwirken zieht es wieder hoch. Dies kann mit erfolgen margin-top: -300px so wie du es gewohnt bist margin-left: -600px zu ziehen Sie es nach links.

position: absolute;
width: 1200px;
height: 600px;
top: 50%;
margin-top: -300px;
left: 50%;
margin-left: -600px;

Question 5

top:50%; funktioniert gut, aber “zentriert” das Element nicht, es platziert seine Oberkante 50% der Seitenhöhe von oben. Ähnlich wie du es hast margin-left:-600px; sollten Sie auch hinzufügen margin-top:-300px;

Question 6

Sie können verwenden

calc(%50 - (items_height/2));

zum Zentrum.

Question 7

Ich glaube, dies könnte die Antwort von Kristian etwas nachahmen, aber hier sind meine zwei Cent, die die Verwendung von Prozentsätzen beinhalten und auch eine in der anderen demonstrieren:

#parent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 60px;
    margin: -60px 0 0 -30px;
    background: blue;
}
#center {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    margin: -12.5% 0 0 -25%;
    background: green;
}

http://jsfiddle.net/userdude/MYD27/

BEARBEITEN

Wenn Sie es weiter betrachten, denke ich, dass Sie auf Probleme stoßen könnten, wenn Sie versuchen, dies mit einem Element zu tun, das kein Container innerhalb eines positionierten Elements ist. Zum Beispiel:

Vollansicht | Codeansicht

Ich glaube nicht, dass es so funktioniert, wie Sie es beabsichtigt haben. Wenn ich hinzufüge position: relative (oder alternativ position: absolute), es funktioniert, denke ich, wie Sie es beabsichtigt haben:

Vollansicht | Codeansicht

Question 8

Ich möchte diese Gelegenheit nutzen, um für meine Antwort auf eine andere Frage hier auf SO offen Werbung zu machen 🙂

Davon abgesehen wird die CSS-Eigenschaft „top“ basierend auf der Höhe des Containerelements korrekt berechnet – wodurch das Zielelement effektiv unterhalb der Mittellinie gerendert wird. Dies bedeutet, dass das Element auf halbem Weg nach oben geschoben werden muss, wie in der verknüpften Frage erläutert.

Leider kann eine so scheinbar einfache Aufgabe nicht durch Anpassen des oberen Rands usw. ohne die Verwendung absoluter pixelbasierter Werte (+1 für Christian Antonsen‘s answer) – man könnte sich vorstellen, dass das Setzen von margin-top auf “-50%” genau das bedeuten würde, aber laut CSS-Spezifikation werden Margin-Werte sogar auf der vertikalen Achse als berechnet ein Prozentsatz immer relativ zur Breite des umgebenden Blocks