Jeg vil sentrere en div som er lagt inn i en annen div.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
Dette er CSS-en jeg bruker for øyeblikket.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
Som du kan se,den tilnærmingen jeg bruker nå avhenger av verdier for bredde og høyde på innerDiv
.hvis bredden / høyden endres, må jeg endre margin-top
og margin-left
verdier.er det noen generisk løsning som jeg kan bruke til å sentrere innerDiv
alltid uavhengig av størrelsen?
Jeg fant ut at ved hjelp av margin:auto
kan horisontalt allign innerDiv til midten.men hva med vertikal allign midten?
Vertikal justering i midten fungerer, men du må bruke table-cell
på det overordnede elementet og inline-block
på det underordnede.
Denne løsningen kommer ikke til å fungere i IE6 og 7. Din er den tryggere veien å gå for dem. Men siden du merket spørsmålet ditt med CSS3 og HTML5, tenkte jeg at du ikke har noe imot å bruke en moderne løsning.
Den klassiske løsningen (tabelloppsett)
Dette var mitt opprinnelige svar. Den fungerer fortsatt bra og er den løsningen som har bredest støtte. Tabell-layout vil påvirke gjengivelsesytelsen, så jeg vil foreslå at du bruker en av de mer moderne løsningene.
[Her er et eksempel][3]
Testet i:
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
Moderne løsning (transformasjon)
Siden transformasjoner er ganske godt støttet nå er det en enklere måte å gjøre det på.
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
[Demo][5]
♥ min favoritt moderne løsning (flexbox).
Jeg begynte å bruke flexbox mer og mer det er også godt støttet nå Det er den desidert enkleste måten.
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
Flere eksempler og muligheter: Sammenlign alle metodene på én og samme side
Jeg vet at spørsmålet ble opprettet for et år siden ... Uansett takk CSS3 kan du enkelt justere div vertikalt i div (eksempel der
)<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>
div
{
display:-moz-box;
-moz-box-align:center;
}