Come centrare l'elemento assolutamente posizionato in div?

1078

Devo posizionare un div(con position:absolute;) elemento al centro della mia finestra. Ma ho problemi a farlo, perché la larghezza non è nota .

Ci ho provato Ma deve essere regolato in quanto la larghezza è reattiva.

.center {
  left: 50%;
  bottom:5px;
}

Qualche idea?

— Ish
fonte

4

Hai un esempio in esempi di centro assoluto che possono essere generalizzati in diverse situazioni.

— Mihai

2

C'è una risposta migliore a questa domanda su stackoverflow.com/questions/17976995/…

— Andrew Swift,

1333

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

Espandi frammento

— bobince
fonte

76

Eccezionale. Ha funzionato per me! Un problema che avevo: l'immagine che stavo centrando era piuttosto grande, questo faceva sì che il div esterno andasse oltre il bordo destro della pagina e causasse lo scorrimento orizzontale. Ho scambiato la proprietà css "sinistra" con "destra", e finora funziona meglio dal momento che andare oltre il bordo sinistro dello schermo non provoca lo scorrimento

— BoomShaka,

cosa succede se l'utente ha fatto scorrere la pagina verso il basso, la sovrapposizione appare in alto, pensi che sia una buona idea usare jquery per risolvere il problema di scorrimento

— PUG

1

una soluzione per il problema di scorrimento può essere position: fixedma cosa succede se l'altezza non è nota per l'overlay, le barre di scorrimento per l'overlay dovranno essere implementate

— PUG

3

Si è verificato un problema minore con questa tecnica. Poiché il div esterno occupa il 50% dello schermo, si verifica uno spostamento quando il testo è più largo della dimensione del 50%. Ho risolto questo problema impostando il div esterno su "larghezza: 100%" e rimuovendo la proprietà sinistra. Per il div interno, ho semplicemente impostato il mio allineamento del testo al centro. Questo risolve il problema.

— Nicky L.,

3

L'altezza percentuale è relativa al blocco contenitore, in questo caso <html>. Ma l' <html>elemento non ha un valore heightspecificato, quindi prende l'altezza di tutto il contenuto del documento, il che non è nulla perché l'unico contenuto è assolutamente posizionato (rimosso dal flusso di contenuto). Aggiunta height: 100%alla <html>elemento fa la differenza per questo.

— Bobince,

1801

Questo funziona per me:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

Espandi frammento

— Matthias Weiler
fonte

36

Voglio solo capire che i margini negativi sono CSS perfettamente validi e non devono essere visti come "hack sporchi". I margini negativi sono indicati nelle specifiche del modello di scatola W3C. Alcuni individui sembrano decidere arbitrariamente che si tratta di un hack perché a) sono ignoranti nei loro confronti, oppure b) li stanno usando per correggere i loro cattivi CSS.

— Joseph Ravenwolfe,

58

la larghezza del div da centrare deve essere impostata - non funzionerà automagicamente con, per esempio, un pulsante con il testo su di esso.

— Stefan

2

@Joshua Questo centrerà solo in orizzontale, non in verticale come l'altra risposta.

— giovedì

3

Preferisco questa soluzione in quanto non aumenta le dimensioni del viewport.

— Iceydee,

13

Per il supporto tra browser: widthdovrebbe essere impostato su un valore specifico affinché funzioni. autoe 100%non centrerà l'elemento. display: block;è un dovere. position: absolute;NON è un must. Tutti i valori funzioneranno. L'elemento genitore positiondovrebbe essere impostato su qualcosa di diverso da static. L'impostazione lefte rightto 0non è necessaria. margin-left: auto; margin-right: auto;farà il lavoro.

— Onur Yıldırım,

767

Soluzione reattiva

Ecco una buona soluzione per un design reattivo o dimensioni sconosciute in generale se non hai bisogno di supportare IE8 e inferiori.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

Mostra snippet di codice

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

Espandi frammento

Ecco un violino JS

L'indizio è che left: 50%è relativo al genitore mentre la translatetrasformazione è relativa alla larghezza / altezza degli elementi.

In questo modo hai un elemento perfettamente centrato, con una larghezza flessibile sia su figlio che su genitore. Bonus: funziona anche se il bambino è più grande del genitore.

Puoi anche centrarlo verticalmente con questo (e di nuovo, la larghezza e l'altezza di genitore e figlio possono essere totalmente flessibili (e / o sconosciuti):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Tieni presente che potrebbe essere necessario anche il transformprefisso del fornitore. Per esempio-webkit-transform: translate(-50%,-50%);

— ProblemsOfSumit
fonte

26

Con il supporto di IE7 non più necessario, questa dovrebbe essere la soluzione di fatto. Questa soluzione è migliore della tecnica sinistra: 0 / destra: 0 poiché rende gli elementi a larghezza piena mentre ciò mantiene la larghezza e lavora su elementi di larghezza sconosciuta.

— aleemb,

51

Di gran lunga la risposta migliore, questo funziona se la casella in cui è contenuto il div è più piccola del bambino.

— Caso

2

@ChadJohnson ovviamente lo fa. Provalo con il webkit-prefisso come ho suggerito.

— ProblemsOfSumit

2

Ah, ho perso la tua nota su -webkit. Eccezionale.

— Chad Johnson,

3

transform: translatesembra rendere position: fixedinutilizzabile nei bambini. La risposta accettata funziona meglio in questo caso.

— dmvianna,

49

Post davvero bello .. Volevo solo aggiungere se qualcuno vuole farlo con un singolo tag div, quindi ecco come uscire:

Prendendo widthcome 900px.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

In questo caso si dovrebbe conoscere in widthanticipo.

— pratikabu
fonte

26

"because the width is unknown"... questo non risponde alla domanda

— Michel Ayres,

15

ciao @Michel in realtà quando cerchi su Google qualcosa legato al centrare il div assoluto, questo link arriva come primo link. Ecco perché ho aggiunto questa soluzione, nel caso in cui qualcuno come me sia alla ricerca della soluzione di cui sopra .. :)

— pratikabu,

1

Non molto utile per il design reattivo, ma ha funzionato per me fino a quando non ho iniziato a fare progetti reattivi. Questa è una risposta valida per il centraggio di elementi di larghezza nota assolutamente posizionati .

— Sean Kendle,

36

Centro assoluto

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Demo: http://jsbin.com/rexuk/2/

Testato su Google Chrome, Firefox e IE8

Spero che sia di aiuto :)

— Ijas Ameenudeen
fonte

Questo non funziona, si prega di controllare il seguente codice codepen.io/anon/pen/YqWxjJ

— Mark

1

Scusa, penso che funzionerà, ma devi includere un'altezza e una larghezza fisse codepen.io/anon/pen/WwxEYQ

— Mark

31

questo lavoro per verticale e orizzontale

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

e se si desidera rendere l'elemento element del genitore, impostare la posizione del genitore relativo

 #parentElement{
      position:relative
  }

modificare:

per il centro verticale allineare l'altezza impostata sul tuo elemento. grazie a @Raul
se si desidera rendere l'elemento centrale del genitore, impostare la posizione del genitore su relativo

— Mohsen Abdollahi
fonte

2

Penso che sia necessario aggiungere l'altezza affinché la verticale funzioni.

— Raul,

Sembra che questa posizioni al centro della pagina, non al centro di un altro elemento.

— Günter Zöchbauer,

1

@ GünterZöchbauer sì, se si desidera rendere l'elemento element del genitore, impostare la posizione del genitore relativo.

— Mohsen Abdollahi,

20

Cercando una soluzione, ho ottenuto le risposte sopra e ho potuto rispondere al contenuto centrato con Matthias Weiler ma usando text-align.

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

Funzionato con Chrome e Firefox.

— cavila
fonte

5

Penso che non ti serva il "text-align: center"

— Tobias,

Questo ha risolto il mio problema qui . Grazie!

— Volomike,

Avevo bisogno di "text-align: center", e questo ha funzionato laddove la soluzione suggerita da @ProblemsOfSumit non ha funzionato perché ha fatto scorrere il mio testo.

— Nat,

19

Se è necessario centrare anche in orizzontale e in verticale:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

— michal.jakubeczy
fonte

molto interessante grazie

— Stanley Bateswar il

15

** SOLUZIONE RESPONSABILE **

Supponendo che l'elemento nel div, sia un altro div ...

questa soluzione funziona bene

<div class="container">
  <div class="center"></div>
</div>

il contenitore può essere di qualsiasi dimensione (deve essere relativo alla posizione)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

L'elemento ( div ) può anche avere qualsiasi dimensione (deve essere più piccolo del contenitore )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

Il risultato sarà simile a questo. Esegui lo snippet di codice

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}

<div class="container">
	<div class="center"></div>
</div>

Espandi frammento

L'ho trovato molto utile

— RealMJDev
fonte

1

genio. perché l'altro non ha inventato questo.

— mesqueeb,

Grazie, buona programmazione

— RealMJDev

13

Questo è un mix di altre risposte, che ha funzionato per noi:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

— Crashalot
fonte

Bella soluzione grazie amico!

— Stanley Bateswar,

12

Capisco che questa domanda abbia già alcune risposte, ma non ho mai trovato una soluzione che funzionasse in quasi tutte le classi che abbia anche senso ed è elegante, quindi ecco la mia opinione dopo aver modificato un mucchio:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

Espandi frammento

Quello che fa è dire dammi a top: 50%e a left: 50%, quindi trasforma (crea spazio) su entrambi gli assi X / Y in -50%valore, in un certo senso "crea uno spazio speculare".

Come tale, questo crea uno spazio uguale su tutti e 4 i punti di un div, che è sempre una scatola (ha 4 lati).

Questo sarà:

Lavora senza conoscere l'altezza / larghezza del genitore.
Lavora su reattivo.
Lavora sull'asse X o Y. O entrambi, come nel mio esempio.
Non riesco a trovare una situazione in cui non funziona.

— Daniel Moss
fonte

Per favore fatemi sapere se trovate una situazione in cui questo non funziona in modo che io possa modificare la domanda con il vostro contributo.

— Daniel Moss,

la trasformazione / traduzione farà sì che Safari renda sfocato il testo su una certa scala

— James Tan

@DanielMoss qualche motivo per non usare translate(-50%,-50%);?

— Mark Baijens,

12

Funziona su qualsiasi larghezza casuale sconosciuta dell'elemento posizionato in modo assoluto che vuoi avere al centro dell'elemento contenitore.

dimostrazione

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

— lowtechsun
fonte

9

Flex può essere utilizzato per centrare div posizionati in modo assoluto.

display:flex;
align-items:center;
justify-content:center;

Mostra snippet di codice

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

Espandi frammento

— Dhaval Jardosh
fonte

sullo schermo -Firefox 68.x, semplicemente non si allinea, il blocco assoluto appare nella parte inferiore del blocco relativo

— Webwoman

Puoi provare questo display: -webkit-flex;?

— Dhaval Jardosh

7

Per quanto ne so, questo è impossibile da raggiungere per una larghezza sconosciuta.

Potresti - se funziona nel tuo scenario - posizionare assolutamente un elemento invisibile con larghezza e altezza del 100% e avere l'elemento centrato lì usando il margine: auto e possibilmente allineare verticalmente. Altrimenti, avrai bisogno di Javascript per farlo.

— Pekka
fonte

+1 per la cosa "margine: auto". Ho provato questo prima di centrare orizzontalmente un div usando la linea "margin: 0 auto" - lo "0" che si applica ai margini verticali e "auto" l'orizzontale. Penso che questo sia ciò che StackOverflow utilizza per il div di livello superiore per ottenere i 2 spessi bordi bianchi lungo i lati della pagina. Tuttavia, la pagina W3Schools sul margine CSS indica per il valore automatico che "Il risultato di questo dipende dal browser" - Non l'ho provato personalmente su molti browser diversi, quindi non posso davvero commentare questo punto (ma ovviamente fa il trucco in alcuni di essi)

— Steg,

1

è possibile per una larghezza (e un'altezza) sconosciute se IE8 non è un problema. Vedi la mia risposta per i dettagli.

— ProblemsOfSumit

7

Vorrei aggiungere alla risposta di @ bobince:

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

Migliorato: /// questo fa apparire la barra di scorrimento orizzontale con grandi elementi nel div centrato.

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; 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>
    </div>
</body>

— fiala
fonte

6

Ecco un utile plugin jQuery per farlo. Trovato qui . Non credo sia possibile solo con CSS

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

— Ben Shelock
fonte

questo è il modo migliore, e in particolare con il design repsonsive.

— m4tm4t,

Sarebbe banale se jQuery fosse usato in ogni caso

— Code Whisperer,

8

questo NON è il modo migliore. È sempre meglio usare CSS quando possibile. Centrare un DIV è possibile con CSS in ogni asse e anche per pagine reattive. Non è necessario JavaScript!

— ProblemsOfSumit

1

@yckart e in questo caso lo strumento è CSS.

— ProblemsOfSumit

5

versione sass / compass della Soluzione reattiva sopra:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

— Adam Spence
fonte

4

transform: translate(-50%, -50%)rende il testo e tutti gli altri contenuti sfocati su OS X utilizzando i browser webkit. keithclark.co.uk/articles/gpu-text-rendering-in-webkit

— Yasha

Basta usare il tipo di antialias che ti piace -webkit-font-smoothing: antialiased;che ho ricavato dall'articolo che hai pubblicato tra l'altro!

— Adam Spence,

4

Il mio metodo di centraggio preferito:

position: absolute;
margin: auto;
width: x%

posizionamento assoluto dell'elemento a blocchi
margine auto
stesso a sinistra / a destra, in alto / in basso

JSFiddle qui

— vp_arth
fonte

4

Questo ha funzionato per me:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

— Alan
fonte

È la risposta di @Matthias Weiler 5 anni dopo.

— aloisdg si trasferisce su codidact.com il

3

So di aver già fornito una risposta e la mia risposta precedente, insieme ad altre date, funziona perfettamente. Ma l'ho usato in passato e funziona meglio su alcuni browser e in determinate situazioni. Quindi ho pensato di dare anche questa risposta. Non ho "Modifica" la mia risposta precedente e l'ho aggiunta perché ritengo che questa sia una risposta completamente separata e le due che ho fornito non sono correlate.

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

— Dustin Poissant
fonte

3

#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

— Burcu AKCAOGLU
fonte

2

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

— Dustin Poissant
fonte

2

Questa soluzione funziona se l'elemento ha widtheheight

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="wrapper">
  <div class="content"></div>
</div>

Espandi frammento

— Mo.
fonte

2

la soluzione di questa domanda non ha funzionato per il mio caso .. Sto facendo una didascalia per alcune immagini e ho risolto usando questo

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}

<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>

Espandi frammento

— Marcogomesr
fonte

1

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

Questo e altri esempi qui

1

Questo è un trucco che ho capito per far fluttuare un DIV esattamente al centro di una pagina. Davvero brutto ovviamente, ma funziona in tutto

Punti e trattini

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

addetto alle pulizie

Caspita che sono passati solo cinque anni, no?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

— Mr. B.
fonte

1

.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}

— AndreyP
fonte

0

Puoi posizionare l'immagine in un div e aggiungere un ID div e fare in modo che il CSS per quel div abbia un text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}

— Dworvin Vonstrangle
fonte

0

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

Espandi frammento

— amit bende
fonte

0

Un approccio semplice che ha funzionato per me per centrare orizzontalmente un blocco di larghezza sconosciuta:

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

Una proprietà text-align può essere aggiunta al set di regole #block per allineare il suo contenuto indipendentemente dall'allineamento del blocco.

Questo ha funzionato su versioni recenti di Firefox, Chrome, IE, Edge e Safari.

— Terence Bandoian
fonte