Marge:auto gebruiken om een ​​div verticaal uit te lijnen

Dus ik weet dat we een div horizontaal kunnen centreren als we margin:0 auto;gebruiken. Moet margin:auto auto;werken zoals ik denk dat het zou moeten werken? Ook verticaal centreren?

Waarom werkt vertical-align:middle;ook niet?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

Snippet uitvouwen


Antwoord 1, autoriteit 100%

Update aug 2020

Hoewel het onderstaande nog steeds de moeite waard is om te lezen voor de nuttige informatie, hebben we Flexbox nu al een tijdje, dus gebruik dat gewoon, volgens dit antwoord.


Je kunt het volgende niet gebruiken:

vertical-align:middleomdat het is nietvan toepassing op elementen op blokniveau

margin-top:autoen margin-bottom:autoomdat hun gebruikte waarden zouden worden berekend als nul

margin-top:-50%omdat op percentages gebaseerde margewaarden worden berekend ten opzichte van de breedtevan het bevattende blok

In feite is de aard van de documentstroom en algoritmen voor het berekenen van de elementhoogtehet onmogelijk maken om marges te gebruiken om een ​​element verticaal binnen zijn bovenliggende element te centreren. Telkens wanneer de waarde van een verticale marge wordt gewijzigd, wordt een herberekening van de hoogte van het bovenliggende element geactiveerd (re-flow), wat op zijn beurt een opnieuw centreren van het oorspronkelijke element zou activeren… waardoor het een oneindige lus wordt.

U kunt het volgende gebruiken:

Een paar oplossingen zoals dezedie voor uw scenario werken ; de drie elementen moeten als volgt worden genest:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}
<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

Snippet uitvouwen


Antwoord 2, autoriteit 75%

Sinds deze vraag in 2012 werd gesteld en we een lange weg hebben afgelegd met browserondersteuning voor flexboxen, had ik het gevoel dat dit antwoord verplicht was.

Als de weergave van uw bovenliggende container flexis, dan ja, margin: auto auto(ook bekend als margin: auto) zal het zowel horizontaal als verticaal centreren, ongeacht of het een inlineof blockelement is.

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}
<div id="parent">
    <div id="child">hello world</div>
</div>

Snippet uitvouwen


Antwoord 3, autoriteit 35%

Dit is de beste oplossing die ik heb gevonden: http://jsfiddle.net/yWnZ2/446/Werkt in Chrome, Firefox, Safari, IE8-11 & Rand.

Als je een opgegeven height(height: 1em, height: 50%, etc.) hebt of als het een element is waar de browser kent de hoogte (img, svgof canvasbijvoorbeeld), dan is alles wat je nodig hebt voor verticaal centreren dit:

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

Meestal wilt u een widthof max-widthopgeven, zodat de inhoud niet over de hele lengte van het scherm/de container wordt uitgerekt.

Als je dit gebruikt voor een modaal dat je altijd gecentreerd wilt hebben in de viewport die andere inhoud overlapt, gebruik dan position: fixed;voor beide elementen in plaats van position: absolute. http://jsfiddle.net/yWnZ2/445/

Hier is een completere beschrijving: http://codepen.io/shshaw/pen/gEiDt


Antwoord 4, autoriteit 13%

Bewerken: het is 2020, ik zou in plaats daarvan flexbox gebruiken.

Oorspronkelijk antwoord:

HTML

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

CSS

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

Antwoord 5, autoriteit 5%

Ik weet dat de vraag uit 2012 stamt, maar ik vond de gemakkelijkste manier ooit, en ik wilde deze delen.

HTML:

<div id="parent">
     <div id="child">Content here</div>
</div>

en CSS:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Antwoord 6, autoriteit 4%

Als u de hoogte weet van de div die u wilt centreren, kunt u deze absoluut binnen de bovenliggende positie plaatsen en vervolgens de top-waarde instellen op 50%. Dat plaatst de bovenkant van het kind voor 50% van de weg naar beneden, d.w.z. te laag. Trek het weer omhoog door de margin-topin te stellen op de helft van zijn hoogte. Dus nu heb je het verticale middelpunt van de onderliggende div op het verticale middelpunt van de ouder – verticaal gecentreerd!

Voorbeeld:

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

Snippet uitvouwen


Antwoord 7, autoriteit 2%

Voor deze twee oplossingen zijn slechts twee geneste elementen nodig.
Eerste– Relatieve en absolute positionering als de inhoud statisch is(handmatig midden).

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);
}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

of voor vloeiend ontwerp– voor exact inhoudscentrum gebruik in plaats daarvan onderstaand voorbeeld:

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

https://jsfiddle.net/GlupiJas/w3jnjuv0/

Je moet ‘min-height’ instellen als de inhoud 50% van de vensterhoogte overschrijdt. U kunt deze hoogte ook manipuleren met mediaquery voor mobiele apparaten en tablets. Maar alleen als je speelt met responsive design.

Ik denk dat je verder kunt gaan en een eenvoudig JavaScript/JQuery-script kunt gebruiken om de min-height of vaste hoogte te manipuleren als dat om de een of andere reden nodig is.

Tweedeals de inhoud vloeiend isu kunt ook tabel- en tabelcel-css-eigenschappen gebruiken met verticale uitlijning en tekstuitlijning gecentreerd:

/*in a wrapper*/  
display:table;   

en

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

Werkt en schaal perfect, vaak gebruikt als responsieve webontwerpoplossing met rasterlay-outs en mediaquery’s die de breedte van het object manipuleren.

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);
}
.message {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

https://jsfiddle.net/GlupiJas/4daf2v36/

Ik geef de voorkeur aan een tabeloplossing voor exacte inhoudscentrering, maar in sommige gevallen zal relatieve absolute positionering beter werken, vooral als we niet de exacte verhouding van inhouduitlijning willen behouden.


Antwoord 8, autoriteit 2%

.black {
    display:flex;
    flex-direction: column;
    height: 200px;
    background:grey
}
.message {
    background:yellow;
    width:200px;
    padding:10px;
    margin: auto auto;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

Snippet uitvouwen


Antwoord 9

Er is niet één gemakkelijke manier om div verticaal te centreren die in elke situatie zou werken.

Er zijn echter veel manieren om dit te doen, afhankelijk van de situatie.

Hier zijn er een paar:

  • Stel de bovenste en onderste opvulling van het bovenliggende element in, bijvoorbeeld opvulling:20px 0px 20px 0px
  • Gebruik tabel, tabelcel centreert de inhoud verticaal
  • Stel de relatieve positie van het bovenliggende element en de div’s die je verticaal wilt centreren in op absoluut en style het als top:50px; onder:50px; bijvoorbeeld

U kunt ook googlen op ‘css verticaal centreren’


Antwoord 10

variabele hoogte, marge boven en onder automatisch

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}
<div class="black">
<div class="message">
    This is a popup message.
</div>

Snippet uitvouwen


Antwoord 11

Flexbox gebruiken:

HTML:

<div class="container">
  <img src="https://lorempixel.com/400/200" />
</div>

CSS:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Bekijk resultaat


12

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}
 - 
----------
<div class="black">
<div class="message">
    This is a popup message.
</div>

Other episodes