Come posso centrare orizzontalmente un <div>
all'interno di un altro <div>
usando CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Come posso centrare orizzontalmente un <div>
all'interno di un altro <div>
usando CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Risposte:
Puoi applicare questo CSS all'interno <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
Naturalmente, non c'è bisogno di impostare l' width
a 50%
. Qualsiasi larghezza inferiore a quella contenuta <div>
funzionerà. La margin: 0 auto
è quello che fa la centratura effettivo.
Se scegli come target Internet Explorer 8 (e versioni successive), potrebbe essere preferibile avere questo:
#inner {
display: table;
margin: 0 auto;
}
Renderà l'elemento interno al centro in orizzontale e funziona senza impostare uno specifico width
.
Esempio di lavoro qui:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
margin-left: auto; margin-right: auto
penso.
margin:0 auto
: può essere in margin: <whatever_vertical_margin_you_need> auto
secondo luogo il margine orizzontale.
Se non vuoi impostare una larghezza fissa all'interno, div
puoi fare qualcosa del genere:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Ciò trasforma l'interno div
in un elemento inline che può essere centrato text-align
.
float: none;
ed è probabilmente necessaria solo perché #inner ha ereditato float
uno left
o right
da qualche altra parte nel tuo CSS.
text-align
quindi si consiglia di impostare di interni text-align
a initial
o qualche altro valore.
I migliori approcci sono con CSS 3 .
#outer {
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner {
width: 50%;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Secondo la tua usabilità puoi anche usare le box-orient, box-flex, box-direction
proprietà.
Flex :
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
E questo spiega perché il modello box è l'approccio migliore :
-webkit
bandiere per FlexBox ( display: -webkit-flex;
e -webkit-align-items: center;
e -webkit-justify-content: center;
)
Supponi che il tuo div sia largo 200 pixel:
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
Assicurarsi che l'elemento genitore sia posizionato , ovvero relativo, fisso, assoluto o appiccicoso.
Se non conosci la larghezza del tuo div, puoi usare al transform:translateX(-50%);
posto del margine negativo.
https://jsfiddle.net/gjvfxxdj/
Con CSS calc () , il codice può diventare ancora più semplice:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
Il principio è sempre lo stesso; metti l'elemento nel mezzo e compensa la larghezza.
Ho creato questo esempio per mostrare come verticalmente e orizzontalmente align
.
Il codice è sostanzialmente questo:
#outer {
position: relative;
}
e...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
E rimarrà nel center
anche quando ridimensioni lo schermo.
Alcuni poster hanno citato il modo CSS 3 di centrare usando display:box
.
Questa sintassi è obsoleta e non dovrebbe più essere utilizzata. [Vedi anche questo post] .
Quindi, solo per completezza, ecco l'ultimo modo di centrare in CSS 3 usando il modulo di layout box flessibile .
Quindi se hai un markup semplice come:
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
... e vuoi centrare i tuoi oggetti all'interno della scatola, ecco cosa ti serve sull'elemento genitore (.box):
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
Se hai bisogno di supportare browser più vecchi che usano la sintassi precedente per flexbox, ecco un buon posto in cui cercare.
flex-direction
valore. Se è "riga" (impostazione predefinita), quindi justify-content: center;
è per l'allineamento orizzontale (come ho già detto nella risposta) Se è "colonna", allora justify-content: center;
è per l'allineamento verticale.
Se non vuoi impostare una larghezza fissa e non vuoi il margine extra, aggiungi display: inline-block
al tuo elemento.
Puoi usare:
#element {
display: table;
margin: 0 auto;
}
display: table;
prima. Che cosa fa?
Orizzontalmente e verticalmente. Funziona con browser abbastanza moderni (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, ecc.)
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>
Non può essere centrato se non gli dai una larghezza. Altrimenti, prenderà, per impostazione predefinita, l'intero spazio orizzontale.
width: fit-content;
e margin: 0 auto
. Penso che questo possa funzionare con una larghezza sconosciuta.
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Impostare width
e impostare margin-left
e margin-right
su auto
. Questo è solo per orizzontale , però. Se vuoi entrambi i modi, lo faresti in entrambi i modi. Non aver paura di sperimentare; non è come se tu rompessi qualcosa.
Di recente ho dovuto centrare un div "nascosto" (cioè, display:none;
) che conteneva un modulo tabulare al suo interno che doveva essere centrato sulla pagina. Ho scritto il seguente codice jQuery per visualizzare il div nascosto e quindi aggiornare il contenuto CSS sulla larghezza generata automaticamente della tabella e modificare il margine per centrarlo. (L'interruttore di visualizzazione viene attivato facendo clic su un collegamento, ma questo codice non era necessario per la visualizzazione.)
NOTA: sto condividendo questo codice, perché Google mi ha portato a questa soluzione Stack Overflow e tutto avrebbe funzionato tranne che gli elementi nascosti non hanno alcuna larghezza e non possono essere ridimensionati / centrati fino a quando non vengono visualizzati.
$(function(){
$('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
<form action="">
<table id="innerTable">
<tr><td>Name:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="submit"></td></tr>
</table>
</form>
</div>
Il modo in cui lo faccio di solito sta usando la posizione assoluta:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
Il div esterno non ha bisogno di proprietà aggiuntive per farlo funzionare.
Per Firefox e Chrome:
<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>
Per Internet Explorer, Firefox e Chrome:
<div style="width:100%; text-align:center;">
<div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>
La text-align:
proprietà è facoltativa per i browser moderni, ma è necessaria nella modalità Quirks di Internet Explorer per il supporto dei browser legacy.
Uso:
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
Un'altra soluzione per questo senza dover impostare una larghezza per uno degli elementi sta usando l' transform
attributo CSS 3 .
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Il trucco è che translateX(-50%)
imposta l' #inner
elemento del 50 percento a sinistra della sua stessa larghezza. Puoi usare lo stesso trucco per l'allineamento verticale.
Ecco un violino che mostra l'allineamento orizzontale e verticale.
Ulteriori informazioni sono disponibili su Mozilla Developer Network .
-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Chris Coyier che ha scritto un eccellente post su "Centering in the Unknown" sul suo blog. È un riepilogo di più soluzioni. Ne ho pubblicato uno non pubblicato in questa domanda. Ha un supporto per browser maggiore rispetto alla soluzione Flexbox e non stai utilizzando ciò display: table;
che potrebbe danneggiare altre cose.
/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
overflow: hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}
Di recente ho trovato un approccio:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
Entrambi gli elementi devono avere la stessa larghezza per funzionare correttamente.
#inner
solo: #inner { position:relative; left:50%; transform:translateX(-50%); }
. Funziona con qualsiasi larghezza.
Ad esempio, vedi questo link e lo snippet di seguito:
div#outer {
height: 120px;
background-color: red;
}
div#inner {
width: 50%;
height: 100%;
background-color: green;
margin: 0 auto;
text-align: center; /* For text alignment to center horizontally. */
line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
<div id="inner">Foo foo</div>
</div>
Se hai molti figli sotto un genitore, quindi il tuo contenuto CSS deve essere come questo esempio su violino .
L'aspetto del contenuto HTML piace questo:
<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>
Quindi vedi questo esempio sul violino .
Nella mia esperienza, il modo migliore per centrare una scatola in orizzontale è applicare le seguenti proprietà:
text-align: center;
display: inline-block;
.container {
width: 100%;
height: 120px;
background: #CCC;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="container">
<div class="centered-content">
Center this!
</div>
</div>
Vedi anche questo violino !
Nella mia esperienza, il modo migliore per centrare una scatola sia in verticale che in orizzontale è utilizzare un contenitore aggiuntivo e applicare le seguenti proprietà:
display: table;
display: table-cell;
vertical-align: middle;
text-align: center;
display: inline-block;
.outer-container {
display: table;
width: 100%;
height: 120px;
background: #CCC;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
Vedi anche questo violino !
La via più facile:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</div>
</div>
#outer
non ne ha bisogno width:100%;
come <div>
sempre lo è per impostazione predefinita width:100%
. e text-align:center
inoltre non è affatto necessario.
Se la larghezza del contenuto è sconosciuta, è possibile utilizzare il seguente metodo . Supponiamo di avere questi due elementi:
.outer
-- intera larghezza.inner
- nessuna larghezza impostata (ma è possibile specificare una larghezza massima)Supponiamo che la larghezza calcolata degli elementi sia rispettivamente di 1000 pixel e 300 pixel. Procedi come segue:
.inner
dentro.center-helper
.center-helper
un blocco in linea; diventa delle stesse dimensioni della .inner
larghezza di 300 pixel..center-helper
50% a destra rispetto al suo genitore; questo posiziona la sua sinistra a 500 pixel wrt. esterno..inner
50% a sinistra rispetto al suo genitore; questo posiziona la sua sinistra a -150 pixel wrt. aiuto centrale che significa che la sua sinistra è a 500-150 = 350 pixel wrt. esterno..outer
nascosto per impedire la barra di scorrimento orizzontale.demo:
body {
font: medium sans-serif;
}
.outer {
overflow: hidden;
background-color: papayawhip;
}
.center-helper {
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;
}
.inner {
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;
}
<div class="outer">
<div class="center-helper">
<div class="inner">
<h1>A div with no defined width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Duis condimentum sem non turpis consectetur blandit.<br>
Donec dictum risus id orci ornare tempor.<br>
Proin pharetra augue a lorem elementum molestie.<br>
Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
</div>
</div>
</div>
Puoi fare qualcosa del genere
#container {
display: table;
width: <width of your container>;
height: <height of your container>;
}
#inner {
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
Ciò consentirà inoltre di allineare #inner
verticalmente. Se non si desidera, rimuovere le proprietà display
e vertical-align
;
Ecco cosa vuoi nel modo più breve.
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}
L'applicazione text-align: center
del contenuto incorporato è centrata nella casella della riga. Tuttavia, poiché il div interno ha per impostazione predefinita width: 100%
è necessario impostare una larghezza specifica o utilizzare uno dei seguenti:
L'uso margin: 0 auto
è un'altra opzione ed è più adatto per la compatibilità dei browser meno recenti. Funziona insieme a display: table
.
display: flex
si comporta come un elemento a blocchi e ne definisce il contenuto in base al modello di flexbox. Funziona con justify-content: center
.
Nota: Flexbox è compatibile con la maggior parte dei browser ma non con tutti. Vedi qui per un elenco completo e aggiornato della compatibilità dei browser.
transform: translate
consente di modificare lo spazio delle coordinate del modello di formattazione visiva CSS. Usandolo, gli elementi possono essere tradotti, ruotati, ridimensionati e inclinati. Per centrare orizzontalmente richiede position: absolute
e left: 50%
.
<center>
(Obsoleto)Il tag <center>
è l'alternativa HTML a text-align: center
. Funziona su browser meno recenti e la maggior parte di quelli nuovi, ma non è considerata una buona pratica poiché questa funzionalità è obsoleta ed è stata rimossa dagli standard Web.
Puoi usarlo display: flex
per il tuo div esterno e per centrare orizzontalmente devi aggiungerejustify-content: center
#outer{
display: flex;
justify-content: center;
}
oppure puoi visitare w3schools - Proprietà flex CSS per ulteriori idee.
Flex ha una copertura del supporto del browser superiore al 97% e potrebbe essere il modo migliore per risolvere questo tipo di problemi in poche righe:
#outer {
display: flex;
justify-content: center;
}
Bene, sono riuscito a trovare una soluzione che forse si adatta a tutte le situazioni, ma utilizza JavaScript:
Ecco la struttura:
<div class="container">
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
</div>
Ed ecco lo snippet JavaScript:
$(document).ready(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
Se si desidera utilizzarlo in un approccio reattivo, è possibile aggiungere quanto segue:
$(window).resize(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
Questo metodo funziona anche bene:
div.container {
display: flex;
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
Per l'interno <div>
, l'unica condizione è che sia height
e width
non debba essere più grande di quelle del suo contenitore.
Esisteva un'opzione che ho trovato:
Tutti dicono di usare:
margin: auto 0;
Ma c'è un'altra opzione. Impostare questa proprietà per il div parent. Funziona perfettamente in qualsiasi momento:
text-align: center;
E vedi, bambina, vai al centro.
E infine CSS per te:
#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}