Come centrare l’elemento posizionato in modo assoluto in div?

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 */ } 

  
 
 I'm the content 
 
  

Soluzione retriggers

Ecco una buona soluzione per la progettazione retriggers o dimensioni sconosciute in generale se non è necessario supportare IE8 e inferiore.

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

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

 
 
I'm always centered
doesn't matter how much text, height or width i have.
The dimensions or my parent are irrelevant as well
  

Davvero un bel post .. Volevo solo aggiungere se qualcuno vuole farlo con un tag div singolo, quindi qui la via d’uscita:

width a 900px .

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

In questo caso si dovrebbe conoscere la width anticipo.

Centro assoluto

HTML:

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 questo ti aiuti 🙂

questo lavoro per verticale e orizzontale

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

e se vuoi rendere l’elemento centro del genitore, imposta la posizione del genitore relativo

  #parentElement{ position:relative } 

modificare:

• per il centro verticale allineare l’altezza impostata al tuo elemento. grazie a @Raul

• se vuoi rendere l’elemento centro del genitore, imposta la posizione del genitore in relativo

Alla ricerca di una soluzione ho ottenuto risposte sopra e ho potuto rendere il contenuto centrato con la risposta di Matthias Weiler ma usando text-align.

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

Ha funzionato con Chrome e Firefox.

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

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

 
 Category 
  

Per quanto ne so, questo è imansible da ottenere per una larghezza sconosciuta.

Potresti – se questo funziona nel tuo scenario – posizionare assolutamente un elemento invisibile con larghezza e altezza al 100% e avere l’elemento centrato in là usando il margine: automatico e possibilmente allineato in verticale. Altrimenti, avrai bisogno di Javascript per farlo.

Vorrei aggiungere alla risposta di @ bobince:

  
 
 I am some centered shrink-to-fit content! 
 tum te tum 
 
  

Migliorato: /// questo rende la barra di scorrimento orizzontale non visualizzata con elementi grandi nel div centrato.

  
 
 
 I am some centered shrink-to-fit content! 
 tum te tum 
 
 
  

Ecco un utile plugin jQuery per farlo. Trovato qui . Non penso sia ansible solo con i 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) }); }; 

Il mio metodo di centraggio preferito:

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

• posizionamento assoluto degli elementi di blocco
• margine automatico
• stesso sinistra / destra, alto / basso

JSFiddle qui

versione sass / compass della Soluzione retriggers sopra:

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

Questo ha funzionato per me:

 

		      	
  So di aver già fornito una risposta, e la mia risposta precedente, insieme ad altri dati, funziona perfettamente.  Ma ho usato questo in passato e funziona meglio su determinati browser e in determinate situazioni.  Quindi ho pensato anche a dare questa risposta.  Non ho “modificato” la mia risposta precedente e l’ho aggiunta perché ritengo che questa sia una risposta completamente separata e che i due che ho fornito non siano correlati. 
  HTML: 
 
 
  
  CSS: 
 #parent { display: table; } #child { display: table-cell; vertical-align: middle; } 



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



		      	
  Funziona su qualsiasi larghezza casuale sconosciuta dell’elemento posizionato assoluto che si desidera avere al centro dell’elemento contenitore. 
  dimostrazione 
 
 
  
 
 .container { position: relative; width: 100%; } .box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } 



		      	
  HTML: 
 
 
 content 
  
  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 



		      	
  HTML 
 
 
  
  CSS 
 #parent { position: relative; } #centered-child { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto auto; } 
  http://jsfiddle.net/f51rptfy/ 



		      	
  Questo è un trucco che ho capito per ottenere un DIV a galleggiare esattamente al centro di una pagina.  Davvero brutto, naturalmente, ma funziona in tutto 
  Punti e trattini 
 
 
 
 
 
 
 Perfectly Centered Content 
 
 
 
 
  
  addetto alle pulizie 
  Caspita che siano passati solo cinque anni, vero? 
 
 
 
 
 
 
  
Stays in the Middle
 
 
 
 
  




		      	
  È ansible posizionare l’immagine in un div e aggiungere un ID div e il CSS per quel div avere un text-align:center 
  HTML: 
 
   

  CSS: 
 #intro_img { text-align:center; } 



		      	


 #content { margin:0 auto; display:table; float:none;} 
  
 
 I'm the content 
 
  





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

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



		      	
  Ho usato una soluzione simile: 
 #styleName { position: absolute; margin-left: -"X"px; } 
  Dove “X” è la metà della larghezza di un div che voglio mostrare.  Funziona bene per me in tutti i browser. 



		      	
  Cerca di non usare il lato oscuro del CSS.  Evitare l’uso di valori negativi per i margini.  So che a volte sei costretto a fare cose orribili come un margin-left: -450px , ma probabilmente potresti fare qualcosa di simile right: 450px .  È solo il mio modo di lavorare.