680

Sto riscontrando un problema nel centrare un elemento con l'attributo positionimpostato su absolute. Qualcuno sa perché le immagini non sono centrate?

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>

Espandi frammento

— user1098278
fonte

3

devi dare a ul # slideshow una larghezza fissa ...

— ptriek

1195

Se hai impostato una larghezza puoi usare:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

— baaroz
fonte

21

Questa è una risposta molto più pulita del resto! Ci sono avvertenze?

— sbichenko,

8

Risposta più intelligente. L'ho appena controllato e funziona su tutti i browser. Non funziona su IE8 ma funziona su IE> = 9

— Roger,

13

Assicurati di provare in IE, questo trucco non funziona se l'elemento ha una 'larghezza massima' impostata in IE9

— aphax

33

Personalmente preferisco la sintassi "margin: 0 auto; left: 0; right: 0;"

— Hector Ordonez,

58

Questo semplicemente non funziona, a meno che non sia impostata una larghezza. Potrebbe apparire APPEAR se hai text-align: centra sul genitore e non hai uno sfondo sull'elemento posizionato in modo assoluto, ma metti uno sfondo su di esso e vedrai che sta effettivamente prendendo l'intera larghezza. La risposta translateX (-50%) è quella corretta.

— Codemonkey

587

Senza conoscere il width/ dell'elemento heightposizionato ¹ , è ancora possibile allinearlo come segue:

ESEMPIO QUI

.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%) */
}

Vale la pena notare che CSS Transform è supportato in IE9 e versioni successive . (Prefissi fornitore omessi per brevità)

Spiegazione

L'aggiunta top/ leftdi 50%sposta il margine superiore / sinistro dell'elemento al centro del genitore e la translate()funzione con il valore (negativo) di -50%sposta l'elemento della metà della sua dimensione. Quindi l'elemento verrà posizionato al centro.

Questo perché un valore percentuale su top/ leftproperties è relativo all'altezza / larghezza dell'elemento padre (che sta creando un blocco contenitore).

Mentre un valore percentuale sulla funzione di trasformazione è relativo alla larghezza / altezza dell'elemento stesso (in realtà si riferisce alla dimensione del rettangolo di selezione ) .translate()

Per un allineamento unidirezionale, andare con translateX(-50%)o translateY(-50%)invece.

^{1. Un elemento con un positiondiverso da static. Vale a dire relative, absolute, fixedvalori.}

— Hashem Qolami
fonte

65

Questa dovrebbe essere la risposta migliore !!

— Chris Pine,

3

Fantastico! Il meglio del lotto!

— Bhargav Ponnapalli,

4

Ho cercato ovunque una risposta a questa e una buona spiegazione. Questa è la migliore risposta là fuori e anche un'ottima spiegazione! Grazie.

— Mike,

5

Centratura orizzontale: position: absolute; left: 50%; transform: translateX(-50%);, centratura verticale: position: absolute; top: 50%; transform: translateY(-50%);.

— Константин Ван,

1

Proprio ora ho trovato quella translateproprietà, traduce l'elemento in base alle dimensioni di se stesso , indipendentemente dalle dimensioni del suo genitore.

— Farzin Kanzi,

185

Centrare qualcosa che absoluteè posizionato è piuttosto contorto nel CSS.

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

}

Passa margin-leftalla metà (negativa) della larghezza dell'elemento che stai tentando di centrare.

— bookcasey
fonte

5

Durante il test non funziona quando le immagini sono di dimensioni diverse e si accumulano ancora l'una sull'altra

— Ryan Gibbons,

3

Troppo hack-ish (come quasi sempre risulta con CSS). Ma fantastico! :-)

— Dr.Kameleon il

1

Fui tentato dall'intelligenza di alcune altre risposte, ma solo questa era affidabile per me.

— Chris Schiffhauer,

Ho avuto lo stesso problema di Ryan, quindi ho provato la seconda risposta suggerita da "baaroz" e ha funzionato per me !!! e supporta anche risoluzioni diverse, poiché i miei DIV principali hanno larghezza in% e non PX

— UID

Questo non è in realtà centrato. Questo è più posizionato a destra

— Artsicle

82

Div in centro allineato verticalmente e orizzontalmente

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

Nota: gli elementi devono avere larghezza e altezza da impostare

— Sebin Simon
fonte

1

Non so perché questo non ottenga più voti. Funziona su tutti i browser, compresi i browser mobili, per quanto ne so. Cuciture più affidabili in termini di supporto. È semplice, facile e pulito ...

— David Martins

1

Questa è una risposta migliore Richiede solo un div da creare e ha più casi d'uso rispetto alla chiamata a sinistra: 50% ;, top: 50%; come la soluzione con oltre 69 voti

— Ian S

la migliore risposta finora, chiunque venga qui dovrebbe controllarla!

— Abdo Adel,

3

L'elemento ha anche bisogno di un heightset per funzionare.

— alexbooots,

55

Un semplice trucco CSS, basta aggiungere:

width: 100%;
text-align: center;

Funziona su immagini e testo.

— cutez7boyz
fonte

48

Se vuoi centrare un elemento assoluto

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

Se si desidera centrare un contenitore da sinistra a destra, ma non dall'alto verso il basso

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

Se si desidera che un contenitore sia centrato dall'alto verso il basso, indipendentemente dal fatto che sia da sinistra a destra

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

Aggiornamento al 15 dicembre 2015

Bene, ho imparato questo un altro nuovo trucco alcuni mesi fa. Supponendo di avere un elemento padre relativo.

Ecco il tuo elemento assoluto.

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

Con questo, penso che sia una risposta migliore della mia vecchia soluzione. Dal momento che non è necessario specificare larghezza e altezza. Questo adatta il contenuto dell'elemento stesso.

— Wesley Brian Lachenal
fonte

36

Per centrare un elemento "position: absolute".

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

— Vadamadafaka
fonte

32

Questo ha funzionato per me:

position: absolute;
left: 50%;
transform: translateX(-50%);

— Deplake
fonte

27

centrare una posizione: attributo assoluto è necessario impostare a sinistra: 50% e margine-sinistra: -50% della larghezza del 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>

per il centro verticale assoluto devi fare la stessa cosa gemma non con sinistra solo con la parte superiore. (NOTA: html e body devono avere un'altezza minima del 100%;)

<!-- 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>

e può essere combinato per entrambi

   <!-- 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
fonte

16

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

vedi la demo su: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; funziona con un position: absoluteelemento durante l'aggiuntaleft: 0; right: 0;

— Mohammad Dayeh
fonte

2

Fornisci una sorta di commento o motivazione alla base del perché questo codice funziona. Le risposte stesse del codice verranno inevitabilmente contrassegnate per l'eliminazione.

— Rayryeng,

14

Il più semplice, il migliore:

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

Quindi è necessario inserire il tag img in un tag con posizione sportiva: proprietà relativa, come segue:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

— Stéphane de Luca
fonte

8

probabilmente il più corto

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

— cris
fonte

1

Questo è abbastanza fantastico, ma solo per centrare verticalmente e orizzontalmente dobbiamo fare solo margine auto

— Santosh

7

Se non conosci la larghezza dell'elemento puoi usare questo codice:

<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 su violino: http://jsfiddle.net/wrh7a21r/

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

— joseantgv
fonte

@ NabiK.AZ questo esempio è utile se non si conosce la larghezza dell'elemento. Nel tuo esempio hai impostato una larghezza sul div.

— joseantgv,

7

Oppure ora puoi usare la scatola flessibile con assoluto di posizione:

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

.child {
    position: absolute;
}

— Sebastian Thomas
fonte

questo è così sottovalutato.

— Assedio21x

5

Non sono sicuro di ciò che vuoi realizzare, ma in questo caso basta aggiungere width: 100%;al tuoul#slideshow li volontà il trucco.

Spiegazione

I imgtag sono elementi di blocco in linea. Ciò significa che scorrono in linea come il testo, ma hanno anche una larghezza e un'altezza come gli elementi del blocco. Nel tuo CSS ci sono due text-align: center;regole applicate al <body>e al #slideshowWrapper(che è ridondante tra l'altro) questo fa sì che tutti gli elementi figlio inline e inline block siano centrati nei loro elementi di blocco più vicini, nel tuo codice questi sono litag. Tutti gli elementi del blocco hanno width: 100%se sono il flusso statico ( position: static;), che è predefinito. Il problema è che quando dici ai litag di essere position: absolute;, li porti fuori dal normale flusso statico, e questo li fa ridurre le loro dimensioni per adattarsi al loro contenuto interno, in altre parole "perdono" la loro width: 100%proprietà.

— Konstantine Kalbazov
fonte

5

Usare left: calc(50% - Wpx/2);dove W è la larghezza dell'elemento funziona per me.

— Julix
fonte

Come si determina W?

— Purplejacket,

Ha detto "un'immagine" - idealmente quando si fanno immagini per il web dovresti fare l'immagine nella dimensione in cui la userai (piuttosto che ridimensionarla) per evitare inutili pesi (se fai un'immagine grande piccolo) o sfocatura (se si ingrandisce un'immagine piccola). - Puoi usare "imageElement.naturalHeight" e "imageElement.naturalWidth" se stai usando jQuery e poi anche lo stile in modo dinamico, ma sta diventando un po 'complicato. Per essere onesti, molte delle altre risposte richiedono anche di conoscere la larghezza dell'immagine perché la loro tecnica funzioni.

— Julix,

se in realtà non sei chiaro su come ottenere W, in Chrome puoi usare CTRL + Shift + i (strumenti per sviluppatori), quindi CTRL + Shift + C (modalità ispezione) per passare il mouse sopra gli elementi e vedere quanto sono larghe le cose. Puoi anche decidere quanto vuoi che sia largo e aggiungere "width: Wpx" al tuo CSS.

— Julix,

4

Le immagini non sono centrate perché le voci dell'elenco non sono centrate; solo il loro testo è centrato. È possibile ottenere il posizionamento desiderato centrando l'intero elenco o centrando le immagini all'interno dell'elenco.

Una versione rivista del tuo codice è disponibile in fondo. Nella mia revisione ho centrato sia l'elenco che le immagini al suo interno.

La verità è che non puoi centrare un elemento che ha una posizione impostata su assoluto.

Ma questo comportamento può essere imitato!

Nota: queste istruzioni funzioneranno con qualsiasi elemento di blocco DOM, non solo con img.

Circonda la tua immagine con un div o un altro tag (nel tuo caso un li).
```
<div class="absolute-div">
  <img alt="my-image" src="#">
</div>
```
Nota: i nomi dati a questi elementi non sono speciali.

Modifica i tuoi CSS o SCSS per dare al div un posizionamento assoluto e la tua immagine centrata.

.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;
}

E il gioco è fatto! Il tuo img dovrebbe essere centrato!

Il tuo codice:

Prova questo:

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>

Espandi frammento

Spero sia stato utile. In bocca al lupo!

— D3RPZ1LLA
fonte

3

Un oggetto assoluto all'interno di un oggetto relativo è relativo al suo genitore, il problema qui è che hai bisogno di una larghezza statica per il contenitore #slideshowWrappere il resto della soluzione è come dicono gli altri utenti

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/

— eveevans
fonte

Il tuo violino come le due immagini che si sovrappongono.

— Ryan Gibbons,

3

Ecco la soluzione semplice e migliore per l'elemento centrale con "posizione: assoluta"

 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>

Espandi frammento

— SantoshK
fonte

2

Puoi provare in questo modo:

* { 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>

Espandi frammento

— Chirag Dave
fonte

1

La posizione assoluta lo elimina dal flusso e la posiziona su 0x0 rispetto al genitore (l'ultimo elemento del blocco ha un valore assoluto di posizione o relativo).

Non sono sicuro di cosa tu stia cercando di realizzare esattamente, potrebbe essere meglio impostare la li su a position:relativee che le centrerà. Dato il tuo CSS attuale

Dai un'occhiata a http://jsfiddle.net/rtgibbons/ejRTU/ per giocare con esso

— Ryan Gibbons
fonte

: / alla fine è quasi la stessa soluzione della tua ... <Voto

— positivo

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;
}

Non ricordo dove ho visto il metodo di centraggio elencato sopra, usando i valori negativo superiore, destro, inferiore, sinistro. Per me, questa tecnica è la migliore, nella maggior parte delle situazioni.

Quando uso la combinazione dall'alto, l'immagine si comporta come un'immagine di sfondo con le seguenti impostazioni:

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

Maggiori dettagli sul primo esempio sono disponibili qui:
Mantieni le proporzioni di un div con CSS

— Marian07
fonte

0

Ciò che sembra accadere è che ci sono due soluzioni; centrato usando i margini e centrato usando la posizione. Entrambi funzionano bene, ma se si desidera posizionare un elemento assoluto rispetto a questo elemento centrato, è necessario utilizzare il metodo della posizione assoluta, poiché la posizione assoluta del secondo elemento viene impostata automaticamente sul primo genitore posizionato. Così:

<!-- 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>

Fino a quando non avrei letto questo post, usando la tecnica automatica margin: 0, per creare un menu a sinistra del mio contenuto ho dovuto costruire una colonna della stessa larghezza a destra per bilanciarlo. Non carino. Grazie!

— Deane Nettles
fonte

0

Usa margin-left: x%;dove x è la metà della larghezza dell'elemento.

— Bibaswann Bandyopadhyay
fonte

-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>

Espandi frammento

— antelove
fonte

1

Questa risposta ha solo codice. Sebbene possa essere corretto, dovrebbe avere una spiegazione di accompagnamento sul perché il codice risponda alla domanda del PO. Il codice non è "autoesplicativo" su Stack Exchnge.

— JBH,

Come centrare un elemento "position: absolute"

Spiegazione

Spiegazione

Ma questo comportamento può essere imitato!

E il gioco è fatto! Il tuo img dovrebbe essere centrato!

Il tuo codice: