Posizionamento dell'elemento <div> al centro dello schermo

134

Voglio posizionare un <div>(o un <table>) elemento al centro dello schermo indipendentemente dalle dimensioni dello schermo. In altre parole, lo spazio lasciato su 'alto' e 'basso' dovrebbe essere uguale e lo spazio lasciato su 'destro' e 'sinistro' dovrebbero essere uguali. Vorrei realizzare questo con solo CSS.

Ho provato quanto segue ma non funziona:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Nota:
va bene se l' <div>elemento (o <table>) scorre con il sito Web o meno. Voglio solo che sia centrato quando la pagina viene caricata.

javascript css html

— sumit
fonte

1

possibile duplicato di Come allineare un <div> al centro della pagina

— Purag

Ciao Purmou, la domanda che hai menzionato se per il posizionamento al centro della pagina, vale a dire spazio sinistro e destro uguale spazio - non lo spazio superiore e inferiore uguale!

— Accusa il

1

Eventuali duplicati di Qual è il miglior modo di centrare un DIV verticalmente con i CSS

— Outis

possibile duplicato di Come centrare un div in un div - orizzontalmente?

— bjb568,

201

Il modo semplice, se hai una larghezza e un'altezza fisse:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

Si prega di non utilizzare stili in linea! Ecco un esempio funzionante http://jsfiddle.net/S5bKq/ .

— einstein
fonte

13

Per chi cerca un altezza dinamica: stackoverflow.com/questions/396145/...

— pulkitsinghal

1

@ woho87 perché non usare gli stili in linea? per i motivi ben noti o c'è qualcosa in più che dovrei sapere per l'esempio specifico?

— Sharky,

@KatrinRaimond è per i motivi ben noti, documentato qui stackoverflow.com/questions/2612483/… e qui webdesign.about.com/od/css/a/aa073106.htm .

— Alex,

Ma, impostando la parte superiore del divElement nell'unità '%', divElement occupa spazio verticale a meno che divElement non sia posizionato all'interno di un elemento relativo.

— sudip,

è la posizione: fissa o la posizione: assoluta?

— Kurkula,

151

Con le trasformazioni supportate in modo più diffuso in questi giorni, puoi farlo senza conoscere la larghezza / altezza del popup

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Facile! JSFiddle qui: http://jsfiddle.net/LgSZV/

Aggiornamento: controlla https://css-tricks.com/centering-css-complete-guide/ per una guida abbastanza esaustiva sul centraggio CSS. Aggiungendolo a questa risposta in quanto sembra ottenere molti bulbi oculari.

— XwipeoutX
fonte

1

Se si utilizza il contenuto nel popup overflow:auto, lo scorrimento viene rovinato in IE9. :(

— joescii

2

Non così onnipresente. IE8 mantiene il 20% della condivisione del browser e non la supporta . Quindi prendi questo solo per IE9 +.

— fotanus,

7

+1 per essere l'unica soluzione in cui non è necessario specificare altezza e larghezza o utilizzare Javascript.

— Jan Derk,

@fotanus quando gli sviluppatori smettono di supportare IE 9 <gli utenti migreranno o aggiorneranno il loro browser.

— Diego Vieira,

@DIegoVieira questo purtroppo non è come funzionano le cose. Vedi la tragedia dei beni comuni . Quindi le persone continueranno a supportare IE8 perché non vogliono perdere questa condivisione e le persone continueranno a utilizzare perché funziona.

— fotanus,

33

Imposta la larghezza e l'altezza e sei a posto.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Se vuoi che le dimensioni dell'elemento siano flessibili (e non ti preoccupi dei browser legacy), vai con la risposta di XwipeoutX .

— Erik Aigner
fonte

1

Questa è la risposta più pulita e semplice ed è anche ottimizzata per i dispositivi mobili . +1

— Rust,

22

Funzionerà per qualsiasi oggetto. Anche se non conosci le dimensioni:

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

— luminousmen
fonte

17

Ora, è più facile con HTML 5 e CSS 3:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

— Daniel De León
fonte

12

Se hai una posizione fissa e divassoluta, è al 50% dall'alto e al 50% a sinistra e margine negativo in alto e a sinistra rispettivamente della metà dell'altezza e della larghezza. Adatta alle tue esigenze:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

— elclanrs
fonte

9

Usa la flessibilità . Molto più semplice e funzionerà indipendentemente dalle divdimensioni:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Espandi frammento

— Caner
fonte

3

Lo farei in CSS:

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

quindi in HTML:

<div class="centered"></div>

— Eduardo Lago Aguilar
fonte

0

prova questo

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

O questo

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

— Dali
fonte

0

Se c'è qualcuno che cerca una soluzione,

Ho trovato questo,

È la migliore soluzione che ho trovato ancora!

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

http://dabblet.com/gist/2872671

Spero ti diverta!

— Christopher Atwood
fonte

0

Un altro approccio semplice e flessibile per visualizzare il blocco al centro: usare l'allineamento del testo nativo con line-heighte text-align.

Soluzione:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

E esempio html:

<div class="parent">
  <div class="child">My center block</div>
</div>

Facciamo lo div.parentschermo intero e il suo figlio unico si div.childallinea con il testo display: inline-block.

vantaggi:

flessibilità, nessun valore assoluto
supporto ridimensionamento
funziona bene sul cellulare

Semplice esempio su JSFiddle: https://jsfiddle.net/k9u6ma8g

— Pavel Shorokhov
fonte

0

Soluzione alternativa che non utilizza l'assoluta di posizione:
vedo molte risposte assolute di posizione. Non potevo usare la posizione assoluta senza rompere qualcos'altro. Quindi, per quelli che non sono riusciti, ecco cosa ho fatto:
https://stackoverflow.com/a/58622840/6546317 (pubblicato in risposta a un'altra domanda).

La soluzione si concentra solo sulla centratura verticale perché gli elementi dei miei figli erano già centrati orizzontalmente ma lo stesso potrebbe essere applicato se non fosse possibile centrarli orizzontalmente in un altro modo.

— reddtoric
fonte

-2

prova questo:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

— user3423956
fonte

2

Questo è effettivamente lo stesso della risposta accettata

— circa il

sì, ma qui spiego il funzionamento del margine superiore e sinistro ... qualcuno non lo sa ....

— user3423956

1

Quindi è effettivamente lo stesso della seconda risposta

— circa il