CSS: modo reattivo per centrare un div fluido (senza larghezza px) limitando la larghezza massima?

Ho visto un milione di domande su come centrare un elemento di blocco e sembrano esserci un paio di modi per farlo, ma tutti si basano su larghezze di pixel fisse. Quindi entrambi i margin:0 auto o con posizionamento assoluto / relativo e a left:50%; margin-left:[-1/2 width]; left:50%; margin-left:[-1/2 width]; ecc. Sappiamo tutti che questo non può funzionare se l’elemento ha una larghezza impostata in%.

Non c’è davvero modo di farlo in un modo veramente fluido? Sto parlando di usare % per larghezza ( non impostando una dozzina di query multimediali con larghezze fisse sempre più piccole).

Attenzione: ci sono tonnellate di soluzioni là fuori che usano la parola “retriggers”, ma non rispondono alla mia domanda (perché usano comunque larghezze fisse). Ecco un esempio .

Aggiornamento: ho quasi dimenticato: come gestisci la limitazione della larghezza massima dell’elemento centrale e mantenerlo al centro? Vedi il mio commento sotto la risposta di @ smdrager. Esempio di vita reale. Voglio un messaggio pop-up o un effetto light box contenente un paragrafo di testo che appaia centrato nella finestra e che il testo si avvolga fluidamente a seconda della larghezza. Ma non voglio che la casella di testo si estenda troppo lontano dove il testo risulterebbe difficile da leggere (immagina uno schermo da 4 piedi con tre paragrafi disteso su una singola riga di testo). Se si aggiunge una larghezza massima alla maggior parte degli approcci, la casella centrata smetterà di centrarsi quando viene raggiunta la larghezza massima.

Centratura sia in orizzontale che in verticale

In realtà, avere l’altezza e la larghezza in percentuale rende il centraggio ancora più semplice. Hai appena spostato la sinistra e in cima alla metà dell’area non occupata dal div.

Quindi se l’altezza è del 40%, 100% – 40% = 60%. Quindi vuoi il 30% sopra e sotto. Quindi in alto: il 30% fa il trucco.

Vedere l’esempio qui: http://dabblet.com/gist/5957545

Centratura solo orizzontalmente

Usa blocco in linea. L’altra risposta qui non funzionerà per IE 8 e sotto, tuttavia. È necessario utilizzare un hack CSS o stili condizionali per questo. Ecco la versione hack:

Vedere l’esempio qui: http://dabblet.com/gist/5957591

 .inlineblock { display: inline-block; zoom: 1; display*: inline; /* ie hack */ } 

MODIFICARE

Utilizzando le query multimediali è ansible combinare due tecniche per ottenere l’effetto desiderato. L’unica complicazione è l’altezza. Si utilizza un div nidificato per passare tra% width e

http://dabblet.com/gist/5957676

 @media (max-width: 1000px) { .center{} .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;} } @media (min-width: 1000px) { .center{left:50%;top:25%;position:absolute;} .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;} } 

Dall’articolo di Chris Coyier sul centraggio degli elementi di larghezza percentuale :

Invece di usare margini negativi, si usano le trasformazioni translate() .

 .center { position: absolute; left: 50%; top: 50%; /* Nope =( margin-left: -25%; margin-top: -25%; */ /* Yep! */ transform: translate(-50%, -50%); /* Not even necessary really. eg Height could be left out! */ width: 40%; height: 50%; } 

Codepen

Penso che puoi usare display: inline-block sull’elemento che vuoi centrare e impostare text-align: center; sul suo genitore. Questo centra definitivamente il div su tutte le dimensioni dello schermo.

Qui puoi vedere un violino: http://jsfiddle.net/PwC4T/2/ Aggiungo il codice qui per completezza.

HTML

 
Hi

CSS

 #container { text-align: center; } #main { display: inline-block; } #somebackground { text-align: left; background-color: red; } 

Per il centraggio verticale, ho “abbandonato” il supporto per alcuni browser più vecchi a favore del display: table; , che riduce assolutamente il codice, vedi questo violino: http://jsfiddle.net/jFAjY/1/

Ecco il codice (di nuovo) per la completezza:

HTML

  
Hi

CSS

 body, html { height: 100%; } #table-container { display: table; text-align: center; width: 100%; height: 100%; } #container { display: table-cell; vertical-align: middle; } #main { display: inline-block; } #somebackground { text-align: left; background-color: red; } 

Il vantaggio di questo approccio? Non devi occuparti di nessuna percussione , ma gestisce anche correttamente il tag (html5), che ha due dimensioni diverse (una durante il caricamento, una dopo il caricamento, non puoi recuperare la dimensione del tag ‘finché il video non è caricato).

Il rovescio della medaglia è che rilascia il supporto per alcuni browser più vecchi (penso che IE8 non gestirà correttamente questo)

MODIFICARE :
http://codepen.io/gcyrillus/pen/daCyu Quindi per un popup, devi usare position: fixed, display: table proprietà e max-width con em o rem values ​​:) con questa base CSS:

 #popup { position:fixed; width:100%; height:100%; display:table; pointer-events:none; } #popup > div { display:table-cell; vertical-align:middle; } #popup p { width:80%; max-width:20em; margin:auto; pointer-events:auto; } 

Qualcosa di simile potrebbe essere?

HTML

  
SOMETHING

CSS

 body{ text-align: center; } .random{ width: 60%; margin: auto; background-color: yellow; display:block; } 

DEMO: http://jsfiddle.net/t5Pp2/2/

Modifica: aggiunta display:block non rovina la cosa, quindi …

È inoltre ansible impostare il margine su: margin: 0 auto 0 auto; solo per essere sicuro che si concentra solo in questo modo, non dall’alto.

Questo potrebbe sembrare davvero semplicistico …

Ma questo centrerà il div all’interno del div, esattamente al centro in relazione al margine sinistro e destro o al contenitore genitore, ma è ansible regolare la percentuale simmetricamente a sinistra e a destra.

 margin-right: 10%; margin-left: 10%; 

Quindi puoi regolare% per renderlo largo quanto vuoi.