So zentrieren Sie ein Element „Position: absolut“

676

Ich habe ein Problem beim Zentrieren eines Elements, für das das Attribut positionfestgelegt ist absolute. Weiß jemand, warum die Bilder nicht zentriert sind?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>
Erweitern Sie das Snippet

html  css  css-position  centering 
— user1098278
quelle
3
Sie müssen ul # Diashow eine feste Breite geben ...
— ptriek

Antworten:

1190

Wenn Sie eine Breite festgelegt haben, können Sie Folgendes verwenden:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
— baaroz
quelle
21
Dies ist eine viel sauberere Antwort als die anderen! Gibt es irgendwelche Einschränkungen?
— Sbichenko
8
Klügste Antwort. Ich habe es gerade überprüft und es funktioniert in allen Browsern. Es funktioniert nicht auf IE8, aber es funktioniert auf IE> = 9
— Roger
13
Stellen Sie sicher, dass Sie im IE testen. Dieser Trick funktioniert nicht, wenn für das Element in IE9 eine maximale Breite festgelegt wurde
— Aphax
33
Ich persönlich bevorzuge die Syntax "margin: 0 auto; left: 0; right: 0;"
— Hector Ordonez
58
Dies funktioniert ganz einfach nicht, es sei denn, eine Breite ist eingestellt. Es scheint zu funktionieren, wenn Sie Textausrichtung haben: zentrieren Sie sich auf dem übergeordneten Element und haben Sie keinen Hintergrund für das absolut positionierte Element, aber wenn Sie einen Hintergrund darauf setzen, werden Sie sehen, dass es tatsächlich die volle Breite annimmt. Die translateX-Antwort (-50%) ist die richtige.
— Codemonkey
584

Ohne das width/ heightdes positionierten 1- Elements zu kennen, ist es weiterhin möglich, es wie folgt auszurichten:

BEISPIEL HIER

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

Es ist erwähnenswert, dass CSS Transform in IE9 und höher unterstützt wird . (Herstellerpräfixe wurden der Kürze halber weggelassen)

Erläuterung

Durch Hinzufügen von top/ leftof wird 50%die obere / linke Randkante des Elements in die Mitte des übergeordneten Elements verschoben, und translate()mit dem (negativen) Wert von wird -50%das Element um die Hälfte seiner Größe verschoben. Daher wird das Element in der Mitte positioniert.

Dies liegt daran, dass ein Prozentwert für top/ leftproperties relativ zur Höhe / Breite des übergeordneten Elements ist (wodurch ein enthaltender Block erstellt wird).

Während ein Prozentwert für die Transformationsfunktion relativ zur Breite / Höhe des Elements selbst ist (bezieht sich tatsächlich auf die Größe des Begrenzungsrahmens ) .translate()

Für eine unidirektionale Ausrichtung gehen Sie mit translateX(-50%)oder translateY(-50%)stattdessen.

1. Ein Element mit einem positionanderen als static. Dh relative, absolute, fixedWerte.

— Hashem Qolami
quelle
65
Dies sollte die beste Antwort sein !!
— Chris Pine
3
Fantastisch! Das Beste von allem!
— Bhargav Ponnapalli
4
Ich habe überall nach einer Antwort darauf und einer guten Erklärung gesucht. Dies ist die beste Antwort da draußen und auch eine großartige Erklärung! Vielen Dank.
— Mike
5
Horizontale Zentrierung : position: absolute; left: 50%; transform: translateX(-50%);, vertikale Zentrierung : position: absolute; top: 50%; transform: translateY(-50%);.
— 17онстантин Ван
1
Gerade jetzt habe ich diese translateEigenschaft gefunden, das Element durch die Größe von sich selbst zu übersetzen , egal wie groß das übergeordnete Element ist .
— Farzin Kanzi
185

Das Zentrieren von etwas absolutePositioniertem ist in CSS ziemlich kompliziert.

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

Ändern Sie margin-leftdie Hälfte des Elements, das Sie zentrieren möchten, auf (negativ).

— Bücherregal
quelle
5
Beim Testen funktioniert es nicht, wenn Bilder unterschiedlicher Größe sind und sich immer noch aufeinander stapeln
— Ryan Gibbons
3
Zu hackig (wie sich fast immer bei CSS herausstellt). Aber großartig! :-)
— Dr.Kameleon
1
Ich war versucht von der Klugheit einiger anderer Antworten, aber nur diese war für mich zuverlässig.
— Chris Schiffhauer
Ich hatte das gleiche Problem wie Ryan, also habe ich die zweite Antwort von "baaroz" ausprobiert und es hat bei mir funktioniert !!! und es unterstützt auch verschiedene Auflösungen, da meine Haupt-DIV Breite in% und nicht PX
— UID
Dies ist nicht wirklich zentriert. Dies ist mehr rechts
— positioniert
81

Vertikal und horizontal ausgerichtete Mitte teilen 

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

Hinweis: Elemente sollten Breite und Höhe haben, die eingestellt werden sollen

— Sebin Simon
quelle
1
Ich weiß nicht, warum dies nicht mehr gewählt wird. Funktioniert in allen Browsern, einschließlich mobiler Browser, soweit ich das beurteilen kann. Nähte sind zuverlässiger in Bezug auf die Unterstützung. Es ist einfach, leicht und sauber ...
— David Martins
1
Dies ist eine bessere Antwort. Es muss nur ein Div erstellt werden und es gibt mehr Anwendungsfälle als das Aufrufen von left: 50%;, top: 50%; wie die Lösung mit 69+ Stimmen
— Ian S
Die bisher beste Antwort, jeder, der hierher kommt, sollte es überprüfen!
— Abdo Adel
3
Das Element benötigt auch einen heightSatz, damit dies funktioniert.
— Alexbooots
55

Ein einfacher CSS-Trick, fügen Sie einfach hinzu:

width: 100%;
text-align: center;

Dies funktioniert sowohl bei Bildern als auch bei Text.

— cutez7boyz
quelle
48

Wenn Sie ein absolutes Element zentrieren möchten

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Wenn Sie möchten, dass ein Container von links nach rechts zentriert wird, jedoch nicht von oben nach unten

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Wenn Sie möchten, dass ein Container von oben nach unten zentriert wird, unabhängig davon, ob er von links nach rechts ausgerichtet ist

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Aktualisierung zum 15. Dezember 2015

Nun, ich habe diesen neuen Trick vor ein paar Monaten gelernt. Angenommen, Sie haben ein relatives übergeordnetes Element.

Hier geht dein absolutes Element.

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

Damit denke ich, dass es eine bessere Antwort ist als meine alte Lösung. Da müssen Sie nicht Breite UND Höhe angeben. Dieser passt den Inhalt des Elements selbst an.

— Wesley Brian Lachenal
quelle
36

So zentrieren Sie ein Element „Position: absolut“.

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}
— Vadamadafaka
quelle
32

Das hat bei mir funktioniert:

position: absolute;
left: 50%;
transform: translateX(-50%);
— Deplake
quelle
27

Um eine Position zu zentrieren: Absolutes Attribut, das Sie links einstellen müssen: 50% und Rand-links: -50% der Breite des Div.

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

Für die vertikale Mitte absolut müssen Sie das gleiche tun, Knospe nicht mit links nur mit oben. (HINWEIS: HTML und Body müssen eine Mindesthöhe von 100% haben;)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

und kann für beide kombiniert werden

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>
— Rednas
quelle
16 
    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

Siehe Demo unter: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center;; arbeitet position: absolutebeim Hinzufügen mit einem Elementleft: 0; right: 0;

— Mohammad Dayeh
quelle
2
Bitte geben Sie einen Kommentar oder eine Begründung dafür an, warum dieser Code funktioniert. Code-Antworten selbst werden unweigerlich zum Löschen markiert.
— Rayryeng
14

Je einfacher, desto besser:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

Dann müssen Sie Ihr img-Tag wie folgt in ein Tag mit der Position position: relative Eigenschaft einfügen:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>
— Stéphane de Luca
quelle
8

wahrscheinlich die kürzeste

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
— Krise
quelle
1
Das ist ziemlich großartig, aber nur um vertikal und horizontal zu zentrieren, müssen wir den Rand nur automatisch machen
— Santosh
7

Wenn Sie die Breite des Elements nicht kennen, können Sie diesen Code verwenden:

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

Demo bei fiddle: http://jsfiddle.net/wrh7a21r/

Quelle: https://stackoverflow.com/a/1777282/1136132

— joseantgv
quelle
@ NabiK.AZ Dieses Beispiel ist nützlich, wenn Sie die Breite des Elements nicht kennen. In Ihrem Beispiel setzen Sie eine Breite auf div.
— Joseantgv
7

Oder Sie können jetzt eine Flexbox mit absoluter Position verwenden: 

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}
— Sebastian Thomas
quelle
das ist so unterschätzt.
— Siege21x
5

Geben Sie hier die Bildbeschreibung ein

Ich bin mir nicht sicher, was Sie erreichen wollen, aber in diesem Fall reicht es aus, nur width: 100%;Ihren ul#slideshow liWillen zu erhöhen.

Erläuterung

Die imgTags sind Inline-Block-Elemente. Dies bedeutet, dass sie wie Text inline fließen, aber auch eine Breite und Höhe wie Blockelemente haben. In Ihrem CSS gibt es zwei text-align: center;Regeln, die auf das <body>und das #slideshowWrapper(was übrigens redundant ist) angewendet werden. Dadurch werden alle untergeordneten Inline- und Inline-Block-Elemente in ihren nächsten Blockelementen zentriert. In Ihrem Code sind dies liTags. Alle Blockelemente haben, width: 100%wenn es sich um den statischen Fluss ( position: static;) handelt, der standardmäßig verwendet wird. Das Problem ist, dass Sie liTags , wenn Sie sie anweisen, position: absolute;aus dem normalen statischen Fluss herausnehmen. Dies führt dazu, dass sie ihre Größe verkleinern, um nur ihrem inneren Inhalt zu entsprechen. Mit anderen Worten, sie "verlieren" ihre width: 100%Eigenschaft.

— Konstantin Kalbazov
quelle
5

Die Verwendung von left: calc(50% - Wpx/2);W ist die Breite des Elements.

— Julix
quelle
Wie bestimmen Sie W?
— Purplejacket
Er sagte "ein Bild" - idealerweise sollten Sie beim Erstellen von Bildern für das Web das Bild in der Größe erstellen, in der Sie es verwenden möchten (anstatt die Größe zu ändern), um unnötiges Gewicht zu vermeiden (wenn Sie ein großes Bild erstellen) klein) oder Unschärfe (wenn Sie ein kleines Bild groß machen). - Sie können "imageElement.naturalHeight" und "imageElement.naturalWidth" verwenden, wenn Sie jQuery verwenden und dann auch dynamisch stylen, aber das wird etwas kompliziert. Um fair zu sein, müssen Sie bei vielen anderen Antworten auch die Breite des Bildes kennen, damit ihre Technik funktioniert.
— Julix
Wenn Sie sich nicht sicher sind, wie Sie W erhalten sollen, können Sie in Chrome STRG + Umschalt + i (Entwicklertools) und dann STRG + Umschalt + C (Inspektionsmodus) verwenden, um mit der Maus über Elemente zu fahren und zu sehen, wie breit die Dinge sind. Sie können auch einfach entscheiden, wie breit es sein soll, und Ihrem CSS "width: Wpx" hinzufügen.
— Julix
4

Ihre Bilder sind nicht zentriert, da Ihre Listenelemente nicht zentriert sind. nur ihr Text ist zentriert. Sie können die gewünschte Position erreichen, indem Sie entweder die gesamte Liste oder die Bilder in der Liste zentrieren.

Eine überarbeitete Version Ihres Codes finden Sie unten. In meiner Überarbeitung zentriere ich sowohl die Liste als auch die darin enthaltenen Bilder.

Die Wahrheit ist, dass Sie ein Element nicht zentrieren können, dessen Position auf absolut gesetzt ist.

Aber dieses Verhalten kann nachgeahmt werden!

Hinweis: Diese Anweisungen funktionieren mit jedem DOM-Blockelement, nicht nur mit img.

  1. Umgeben Sie Ihr Bild mit einem div oder einem anderen Tag (in Ihrem Fall einem li).

    <div class="absolute-div">
  <img alt="my-image" src="#">
</div>

    Hinweis: Die Namen dieser Elemente sind nicht speziell.

  2. Ändern Sie Ihr CSS oder SCS, um die absolute Positionierung des Div und Ihr zentriertes Bild zu erhalten.

    .absolute-div {
  position: absolute;

  width: 100%; 
  // Range to be centered over. 

  // If this element's parent is the body then 100% = the window's width

  // Note: You can apply additional top/bottom and left/right attributes
  // i.e. - top: 200px; left: 200px;

  // Test for desired positioning.
}

.absolute-div img {
  width: 500px;
  // Note: Setting a width is crucial for margin: auto to work.

  margin: 0 auto;
}

Und da hast du es! Dein Bild sollte zentriert sein!

Dein Code:

Probieren Sie es aus:

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}
<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>
Erweitern Sie das Snippet

Ich hoffe das war hilfreich. Viel Glück!

— D3RPZ1LLA
quelle
3

Ein absolutes Objekt innerhalb eines relativen Objekts ist relativ zu seinem übergeordneten Objekt. Das Problem hierbei ist, dass Sie eine statische Breite für den Container benötigen #slideshowWrapperund der Rest der Lösung den Angaben der anderen Benutzer entspricht

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

— Evaevans
quelle
Ihre Geige, während sich die beiden Bilder gegenseitig stapeln.
— Ryan Gibbons
3

Hier ist eine einfache und beste Lösung für das Mittelelement mit „Position: absolut“. 

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }
 
 
<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>
Erweitern Sie das Snippet

— SantoshK
quelle
2

Sie können dies folgendermaßen versuchen:

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }
<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>
Erweitern Sie das Snippet

— Chirag Dave
quelle
1

Position absolute nimmt es aus dem Fluss heraus und platziert es bei 0x0 zum übergeordneten Element (letztes Blockelement, um eine absolute Position oder eine relative Position zu haben).

Ich bin mir nicht sicher, was genau du bist, was du erreichen willst. Es könnte am besten sein, das Li auf a zu setzen, position:relativeund das wird sie zentrieren. Angesichts Ihres aktuellen CSS

Schauen Sie sich http://jsfiddle.net/rtgibbons/ejRTU/ an, um damit zu spielen

— Ryan Gibbons
quelle
: / am Ende ist fast die gleiche Lösung wie Ihre ... <Up Vote
— Evaevans
1 
#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

Ich kann mich nicht erinnern, wo ich die oben aufgeführte Zentrierungsmethode mit negativen Werten für oben, rechts, unten und links gesehen habe. Für mich ist diese Technik in den meisten Situationen die beste.

Wenn ich die Kombination von oben verwende, verhält sich das Bild wie ein Hintergrundbild mit den folgenden Einstellungen:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

Weitere Details zum ersten Beispiel finden Sie hier:
Pflegen Sie das Seitenverhältnis eines Div mit CSS

— Marian07
quelle
0

Was zu passieren scheint, ist, dass es zwei Lösungen gibt; Mit Rändern zentriert und mit Position zentriert. Beide funktionieren einwandfrei. Wenn Sie jedoch ein Element relativ zu diesem zentrierten Element absolut positionieren möchten, müssen Sie die Methode für die absolute Position verwenden, da die absolute Position des zweiten Elements standardmäßig das erste übergeordnete Element ist, das positioniert ist. Wie so:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

Bis ich diesen Beitrag mit der automatischen Technik margin: 0 gelesen hatte, um ein Menü links von meinem Inhalt zu erstellen, musste ich rechts eine Spalte gleicher Breite erstellen, um es auszugleichen. Nicht hübsch. Vielen Dank!

— Deane Brennnesseln
quelle
-1 

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>
Erweitern Sie das Snippet

— Anteliebe
quelle
1
Diese Antwort enthält nur Code. Es mag zwar richtig sein, sollte aber eine begleitende Erklärung enthalten, warum der Code die Frage des OP beantwortet. Code ist in Stack Exchnge nicht "selbsterklärend".
— JBH
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.