84 views

Hoe kan ik een “div”-element verticaal centreren voor alle browsers die CSS gebruiken?

Hosted by Code Expert
css

Ik wil een divverticaal centreren met CSS. Ik wil geen tabellen of JavaScript, maar alleen pure CSS. Ik heb een aantal oplossingen gevonden, maar ze missen allemaal ondersteuning voor Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

Hoe kan ik een divverticaal centreren in alle belangrijke browsers, inclusief Internet Explorer 6?

Antwoord 1, autoriteit 100%

Hieronder staat de beste totaaloplossing die ik zou kunnen bouwen om een inhoudsdoos met een vaste breedte en een flexibele hoogteverticaal en horizontaal te centreren. Het is getest en werkte voor recente versies van Firefox, Opera, Chrome en Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Antwoord 2, autoriteit 20%

Nog één die ik niet op de lijst kan zien:

.Center-Container {
  position: relative;
  height: 100%;
}
.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • Cross-browser (inclusief internet & nbsp; Explorer & NBSP; 8 – Internet & NBSP; Explorer & NBSP; 10 zonder hacks!)
  • reageren met percentages en min- / max –
  • gecentreerd ongeacht de vulling (zonder box-sizing!)
  • heightmoet worden aangegeven (zie Variabele hoogte )
  • Aanbevolen instelling overflow: autoOm inhoudsspillover te voorkomen (zie overflow)

Bron: absolute horizontale en verticale centrering in CSS

Antwoord 3, Autoriteit 20%

De eenvoudigste manier zou de volgende zijn drie lijnen van CSS:

1) Positie: familielid;

2) Top: 50%;

3) Transformeren: Translatyy (-50%);

Hieronder volgt een voorbeeld : 

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}
div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

Antwoord 4, autoriteit 11%

Nu is de Flexbox-oplossing een zeer gemakkelijke manier voor moderne browsers, dus ik raad dit aan voor jij:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: green;
}
body,
html {
  height: 100%;
}
<div class="container">
  <div>Div to be aligned vertically</div>
</div>

Antwoord 5, autoriteit 10%

Eigenlijk heb je twee div’s nodig voor verticaal centreren. De div met de inhoud moet een breedte en hoogte hebben.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* Half of #content height */
  left: 0;
  width: 100%;
}
#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Antwoord 6, autoriteit 5%

Bewerk 2020: gebruik dit alleen als je oude browsers zoals Internet Explorer 8(wat je zou moeten weigeren 😉). Zo niet, gebruik dan Flexbox.

Dit is de eenvoudigste methode die ik heb gevonden en ik gebruik hem altijd
(jsFiddle-demo hier).

Bedank Chris Coyier van CSS Tricks voor dit artikel.

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%;
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Antwoord 7, autoriteit 5%

Na veel onderzoek heb ik eindelijk de ultieme oplossing gevonden. Het werkt zelfs voor zwevende elementen. Bron weergeven

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

Antwoord 8, autoriteit 4%

Gebruik de CSS Flexboxalign-itemseigenschap om dit te bereiken.

html, body {
    height: 100%;
}
body {
  display: flex;
  align-items: center;
}
<div>This is centered vertically</div>

Antwoord 9, autoriteit 3%

Om de div op een pagina te centreren, check de fiddle-link.

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

Antwoord 10, autoriteit 2%

De eenvoudigste oplossing is hieronder:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align: center;
  border: 1px solid red;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

Antwoord 11, autoriteit 2%

Helaas – maar niet verrassend – is de oplossing ingewikkelder dan je zou willen. Helaas moet je ook extra divs gebruiken rond de div die je verticaal gecentreerd wilt hebben.

Voor browsers die aan standaarden voldoen, zoals Mozilla, Opera, Safari, enz., moet u de buitenste div instellen om te worden weergegeven als een tabelen de binnenste div om te worden weergegeven als een tabel -cel— die dan verticaal kan worden gecentreerd. Voor Internet Explorer moet u de binnenste div absoluutin de buitenste div positionerenen vervolgens de topspecificeren als 50%. De volgende pagina’s leggen deze techniek goed uit en bieden ook enkele codevoorbeelden:

Er is ook een techniek om verticaal te centreren met JavaScript. Verticale uitlijning van inhoud met JavaScript & CSSlaat het zien.

Antwoord 12

Als iemand alleen om Internet Explorer 10 (en hoger) geeft, gebruik dan Flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>

Antwoord 13

Een moderne manier om een element verticaal te centreren is door te gebruiken flexbox.

Je hebt een ouder nodig om de lengte te bepalen en een kind om te centreren.

Het onderstaande voorbeeld centreert een div in het midden van uw browser. Wat belangrijk is (in mijn voorbeeld) is om height: 100%in te stellen op bodyen htmlen dan min-height: 100%naar uw container.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}
#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}
#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

Antwoord 14

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}
.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}
.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}
div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  
<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

Antwoord 15

Alleen verticaal centreren

Als Internet Explorer 6 en 7 u niets interesseert, kunt u een techniek gebruiken waarbij twee containers nodig zijn.

De buitenste container:

  • moet display: table;

De binnencontainer:

  • moet display: table-cell;
  • moet vertical-align: middle;

Het inhoudsvak:

  • moet display: inline-block;

Je kunt elke gewenste inhoud aan het inhoudsvak toevoegen zonder je zorgen te maken over de breedte of hoogte!

Demo:

body {
    margin: 0;
}
.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}
.inner-container {
    display: table-cell;
    vertical-align: middle;
}
.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">
        Malcolm in the Middle
     </div>
   </div>
</div>

Antwoord 16

De flex-eigenschap van CSS gebruiken.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}
.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>

Antwoord 17

Hier ga ik altijd heen als ik terug moet komen op dit probleem.

Voor degenen die de sprong niet willen maken:

  1. Geef de bovenliggende container op als position:relativeof position:absolute.
  2. Specificeer een vaste hoogte op de kindercontainer.
  3. Stel position:absoluteen top:50%in op de onderliggende container om de bovenkant naar het midden van de bovenliggende container te verplaatsen.
  4. Stel margin-top:-yy in, waarbij yy de helft is van de hoogte van de onderliggende container om het item naar boven te verplaatsen.

Een voorbeeld hiervan in code:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

Antwoord 18

Ik heb zojuist deze CSS geschreven en ga voor meer informatie naar: Dit artikel waarin alles verticaal wordt uitgelijnd met slechts 3 regels CSS.

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

Antwoord 19

Voor nieuwkomers, probeer:

display: flex;
align-items: center;
justify-content: center;

Antwoord 20

De drie regels code die transformgebruiken, werken praktisch in moderne browsers en Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

Ik voeg dit antwoord toe omdat ik een onvolledigheid vond in de vorige versie van dit antwoord (en Stack Overflow staat me niet toe om gewoon commentaar te geven).

  1. ‘positie’ relatief verpest de styling als de huidige div zich in de body bevindt en geen container-div heeft. ‘Fixed’ lijkt echter te werken, maar het corrigeert duidelijk de inhoud in het midden van de viewport

  2. Ook heb ik deze stijl gebruikt om enkele overlay-div’s te centreren en ontdekte dat in Mozilla alle elementen in deze getransformeerde div hun onderste randen hadden verloren. Mogelijk een weergaveprobleem. Maar door alleen de minimale opvulling aan sommigen van hen toe te voegen, werd het correct weergegeven. Chrome en Internet Explorer hebben (verrassend genoeg) de vakken weergegeven zonder opvulling

Antwoord 21

CSS-raster

body, html { margin: 0; }
body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
<div>Div to be aligned vertically</div>

Antwoord 22

Het antwoord van Billbad werkt alleen met een vaste breedte van de .innerdiv.
Deze oplossing werkt voor een dynamische breedte door het attribuut text-align: centertoe te voegen aan de .outerdiv.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

Antwoord 23

Doe het gewoon: voeg de klas toe aan je div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

En lees dit artikelvoor een toelichting. Opmerking: Heightis noodzakelijk.

Antwoord 24

Geen antwoord op browsercompatibiliteit, maar om ook de nieuwe Grid en de niet zo nieuwe Flexbox-functie te noemen.

Raster

Van:

Browserondersteuning: Gridbrowserondersteuning

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Browserondersteuning: Flexbox-browserondersteuning

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

Antwoord 25

Ik deed het hiermee (wijzig breedte, hoogte, margin-top en margin-left dienovereenkomstig):

.wrapper {
    width: 960px;
    height: 590px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -295px;
    margin-left: -480px;
}

<div class="wrapper"> -- Content -- </div>

Antwoord 26

Ik denk een solide oplossing voor alle browsers zonder Flexbox te gebruiken – “align-items: center;” is een combinatie van display: table en vertical-align: middle;.

CSS

.vertically-center
{
    display: table;
    width: 100%;  /* Optional */
    height: 100%; /* Optional */
}
.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣Demo: https://jsfiddle.net/6m640rpp/

Antwoord 27

Het kan op twee manieren worden gedaan

body{
left: 50%; 
top:50%; 
transform: translate(-50%, -50%); 
height: 100%; 
width: 100%; 
}

OF

Flex gebruiken

body {
    height:100%
    width:100%
    display: flex;
    justify-content: center;
    align-items: center;
}

align-items:center;maakt de inhoud verticaal gecentreerd

justify-content: center;maakt de inhoud horizontaal gecentreerd

Antwoord 28

Speciaal voor bovenliggende divs met relatieve (onbekende) hoogte, de centrering in het onbekende oplossing werkt prima voor mij. Er staan een aantal hele mooie codevoorbeelden in het artikel.

Het is getest in Chrome, Firefox, Opera en Internet Explorer.

/* This parent can be any width and height */
.block {
  text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

Antwoord 29

.center{
    display: grid;
    place-items: center;
}

Antwoord 30

De inhoud kan eenvoudig worden gecentreerd met Flexbox. De volgende code toont de CSS voor de container waarin de inhoud moet worden gecentreerd:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}
Previous articleHoe formatteer ik XML in Notepad++?
Next articleHoe kopieer ik naar het klembord in Vim?

Other episodes

Stylingmat-select in hoekig materiaal

css Code Expert - 0
Hoe de paneelcomponent van mat-select op te maken. Uit de documenten die ik krijg dat ik panelClass moet leveren, maak ik het als volgt:...
Read more

Hoe maak je schaduw op de rand-onderkant?

css Code Expert - 0
Ik moet de randschaduw toepassen op border-bottom door CSS3. Ik wil alleen CSS3-schaduw onderaan toepassen. Is dit mogelijk? Antwoord 1, autoriteit 100% Probeer: div{ -webkit-box-shadow:0px 1px 1px #de1dde; ...
Read more

Beperk tekstlengte tot n regels met CSS

css Code Expert - 0
Is het mogelijk om een ​​tekstlengte te beperken tot "n" regels met behulp van CSS (of deze te knippen wanneer deze verticaal overloopt). text-overflow: ellipsis;werkt...
Read more

CSS-selector voor uitgeschakeld invoertype=”submit”

css Code Expert - 0
Is er een CSS-kiezer voor uitgeschakelde input type="submit"of "button"? Moet ik gewoon inputgebruiken? Werkt dat in IE6? Antwoord 1, autoriteit 100% Werkt dat in IE6? Nee, IE6 ondersteunt...
Read more

Chrome-afdrukwebsite, ontbrekende lay-outopties

css Code Expert - 0
Ik heb een website gemaakt en een deel van de site is ontworpen om in staande modus op tabloidpapier te worden afgedrukt. Het probleem...
Read more

Hoe gebruik je afbeeldingen in css met Webpack

css Code Expert - 0
Ik ben bezig met het maken van een React w/ Webpack-configuratie en heb moeite om te doen wat een eenvoudige taak lijkt te zijn....
Read more

Verschil tussen uitvul-inhoud versus uitlijn-items?

css Code Expert - 0
Ik vind het heel moeilijk om te begrijpen wat het verschil is? Uit mijn onderzoek blijkt dat justify-contentkan doen... space-betweenen space-around, terwijl align-itemskan doen......
Read more

© Copyright - Code Expert 2021