CSS => centreren

CSS-transformatie gebruiken

CSS-transformaties zijn gebaseerd op de grootte van de elementen, dus als u niet weet hoe lang of breed uw element is, kunt u het absoluut 50% van boven en links van een relatieve container plaatsen en het met 50% naar links en naar boven vertalen om het verticaal en horizontaal te centreren.

Houd er rekening mee dat het element met deze techniek kan worden weergegeven met een niet-gehele pixelgrens, waardoor het wazig lijkt. Zie dit antwoord in SO voor een tijdelijke oplossing.

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
}

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

Bekijk een voorbeeld in JSFiddle

CROSS BROWSER COMPATIBILITEIT

De eigenschap transform heeft voorvoegsels nodig die worden ondersteund door oudere browsers. Voorvoegsels zijn nodig voor Chrome <= 35, Safari <= 8, Opera <= 22, Android Browser <= 4.4.4 en IE9. CSS-transformaties worden niet ondersteund door IE8 en oudere versies.

Hier is een algemene transformatieverklaring voor het vorige voorbeeld:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

Zie canIuse voor meer informatie.

MEER INFORMATIE

Het element wordt gepositioneerd volgens de eerste niet-statische ouder ( position: relative , absolute of fixed ). Ontdek meer in deze viool en dit documentatie-onderwerp .

Gebruik voor alleen centreren left: 50% en transform: translateX(-50%) . Hetzelfde geldt voor verticaal centreren: centreren met top: 50% en transform: translateY(-50%) .

Het gebruik van niet-statische breedte / hoogte-elementen bij deze centreringsmethode kan ervoor zorgen dat het gecentreerde element er squished uitziet. Dit gebeurt meestal met elementen die tekst bevatten en kan worden opgelost door toe te voegen: margin-right: -50%; en margin-bottom: -50%; . Bekijk deze viool voor meer informatie.

Flexbox gebruiken

HTML:

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

CSS:

html, body, .container {
  height: 100%;
}    
.container {
  display: flex;
  justify-content: center; /* horizontal center */
}
img {
  align-self: center; /* vertical center */
}

Bekijk resultaat

HTML:

<img src="http://lorempixel.com/400/200" />

CSS:

html, body {
  height: 100%;
}   
body {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Bekijk resultaat

Zie Dynamische verticale en horizontale centrering onder de Flexbox- documentatie voor meer informatie over flexbox en wat de stijlen betekenen.

Browserondersteuning

Flexbox wordt ondersteund door alle belangrijke browsers, behalve IE-versies vóór 10 .

Sommige recente browserversies, zoals Safari 8 en IE10, vereisen leveranciersvoorvoegsels .

Voor een snelle manier om voorvoegsels te genereren, is er Autoprefixer , een tool van derden.

Voor oudere browsers (zoals IE 8 & 9) is een Polyfill beschikbaar .

Zie dit antwoord voor meer informatie over de ondersteuning van de flexbox-browser.

Gebruik positie: absoluut

Werken in oude browsers (IE> = 8)

Automatische marges, gecombineerd met nulwaarden voor de left en right of top en bottom offsets, centreren absoluut gepositioneerde elementen in het bovenliggende element.

Bekijk resultaat

HTML

<div class="parent">
  <img class="center" src="http://lorempixel.com/400/200/" />
</div>

CSS

.parent {
  position: relative;
  height: 500px;
}

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

Voor elementen die niet hun eigen impliciete breedte en hoogte hebben, zoals afbeeldingen, moeten die waarden worden gedefinieerd.

Andere bronnen: Absoluut centreren in CSS

Geestelementtechniek (hack van Michał Czernow)

Deze techniek werkt zelfs wanneer de afmetingen van de container onbekend zijn.

Stel een "geest" -element in de te centreren container in die 100% hoog is en gebruik vervolgens vertical-align: middle op zowel dat als het te centreren element.

CSS

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost element */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;

  /* There is a gap between ghost element and .centered,
  caused by space character rendered. Could be eliminated by
  nudging .centered (nudge distance depends on font family),
  or by zeroing font-size in .parent and resetting it back
  (probably to 1rem) in .centered. */
  margin-right: -0.25em;
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  white-space: normal; /* Resetting inherited nowrap behavior */
}

HTML

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

Text-align gebruiken

Het meest gebruikelijke en gemakkelijkste type centrering is dat van tekstregels in een element. CSS heeft de regel text-align: center for this purpose:

HTML

<p>Lorem ipsum</p>

CSS

p {
    text-align: center;
}

Dit werkt niet voor het centreren van hele blokelementen . text-align regelt alleen de uitlijning van inline content zoals tekst in het bovenliggende blokelement.

Meer informatie over text-align in het gedeelte Typografie .

Centreren ten opzichte van een ander item

We zullen zien hoe we inhoud kunnen centreren op basis van de hoogte van een bijna-element.

Compatibiliteit: IE8 +, alle andere moderne browsers.

HTML

<div class="content">
  <div class="position-container">
    <div class="thumb">
      <img src="http://lorempixel.com/400/200/">
    </div>
    <div class="details">
      <p class="banner-title">text 1</p>
      <p class="banner-text">content content content content content content content content content content content content content content</p>
      <button class="btn">button</button>
    </div>
  </div>
</div>

CSS

.content * {
  box-sizing: border-box;
}
.content .position-container {
  display: table;
}
.content .details {
  display: table-cell;
  vertical-align: middle;
  width: 33.333333%;
  padding: 30px;
  font-size: 17px;
  text-align: center;
}
.content .thumb {
  width: 100%;
}
.content .thumb img {
  width: 100%;
}

Link naar JSFiddle

De belangrijkste punten zijn de 3 .thumb , .details en .position-container containercontainers:

De .position-container moet display: table .
De .details moeten de werkelijke breedte-ingestelde width: .... en display: table-cell , vertical-align: middle .
De .thumb moet width: 100% als u wilt dat alle resterende ruimte in beslag wordt genomen en wordt beïnvloed door de .details breedte.
De afbeelding (als je een afbeelding hebt) binnen .thumb moet een width: 100% , maar het is niet nodig als je de juiste verhoudingen hebt.

Verticaal alles uitlijnen met 3 coderegels

Ondersteund door IE11 +

Bekijk resultaat

Gebruik deze 3 lijnen om praktisch alles verticaal uit te lijnen. Zorg er alleen voor dat de div / afbeelding waarop u de code toepast, een ouder heeft met een lengte.

CSS

div.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<div class="vertical">Vertical aligned text!</div>

Lijn een afbeelding verticaal uit binnen div

HTML

<div class="wrap">
    <img src="http://lorempixel.com/400/200/" />
</div>

CSS

.wrap {
    height: 50px;/* max image height */
    width: 100px;
    border: 1px solid blue;
    text-align: center;
}
.wrap:before {
  content:"";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

img {
    vertical-align: middle;
}

Horizontaal en verticaal centreren met behulp van tabelindeling

Men zou gemakkelijk een onderliggend element kunnen centreren met behulp van table .

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.wrapper { 
    display: table; 
    vertical-align: center; 
    width: 200px; 
    height: 200px; 
    background-color: #9e9e9e; 
}
.parent { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}
.child { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    background-color: teal; 
}

Calc () gebruiken

De functie calc () is het onderdeel van een nieuwe syntaxis in CSS3 waarin u (wiskundig) kunt berekenen welke grootte / positie uw element inneemt door verschillende waarden te gebruiken, zoals pixels, percentages, enz. Opmerking: - Wanneer u deze functie gebruikt , zorg altijd voor de ruimte tussen twee waarden calc(100% - 80px) .

CSS

.center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    top: calc(50% - 50px / 2); /* height divided by 2*/
    left: calc(50% - 50px / 2); /* width divided by 2*/
}

HTML

<div class="center"></div>

Lijn dynamische hoogte-elementen verticaal uit

Intuïtief css toepassen levert niet het gewenste resultaat op omdat

vertical-align:middle is niet van toepassing op elementen op blokniveau
margin-top:auto en margin-bottom:auto gebruikte waarden zouden als nul worden berekend
margin-top:-50% percentage gebaseerde margewaarden worden berekend ten opzichte van de breedte van het bevattende blok

Voor de breedste browserondersteuning een oplossing met helperelementen:

HTML

<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">
      <!--stuff-->
    </div>
  </div>
</div>

CSS

.vcenter--container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.vcenter--helper {
  display: table-cell;
  vertical-align: middle;
}
.vcenter--content {
  margin: 0 auto;
  width: 200px;
}

jsfiddle van oorspronkelijke vraag . Deze aanpak

werkt met dynamische hoogte-elementen
respecteert de inhoudsstroom
wordt ondersteund door oudere browsers

Lijnhoogte gebruiken

U kunt ook line-height om een enkele regel tekst verticaal in een container te centreren:

CSS

div {
    height: 200px;
    line-height: 200px;
}

Dat is nogal lelijk, maar kan handig zijn in een <input /> -element. De line-height eigenschap werkt alleen als de tekst die moet worden gecentreerd overspanningen een enkele lijn. Als de tekst in meerdere regels wordt omgezet, wordt de resulterende uitvoer niet gecentreerd.

Verticaal en horizontaal centreren zonder zorgen te maken over hoogte of breedte

Met de volgende techniek kunt u uw inhoud toevoegen aan een HTML-element en deze zowel horizontaal als verticaal centreren zonder u zorgen te maken over de hoogte of breedte .

De buitenste container

moet display: table;

De binnenste container

moet display: table-cell;
moet vertical-align: middle;
moet text-align: center;

Het inhoudsvenster

moet display: inline-block;
moet de horizontale tekstuitlijning opnieuw aanpassen naar bijv. text-align: left; of text-align: right; , tenzij u wilt dat de tekst wordt gecentreerd

demonstratie

HTML

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>

CSS

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;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

Zie ook deze viool !

Centreren met vaste maat

Als de grootte van uw inhoud vast is, kunt u absolute positionering gebruiken tot 50% met een margin die de helft van de breedte en hoogte van uw inhoud vermindert:

HTML

<div class="center">
    Center vertically and horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* height * -0.5 */
}

Horizontaal centreren met alleen vaste breedte

U kunt het element horizontaal centreren, zelfs als u de hoogte van de inhoud niet weet:

HTML

<div class="center">
    Center only horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */
}

Verticaal centreren met vaste hoogte

U kunt het element verticaal centreren als u de hoogte van het element kent:

HTML

<div class="center">
    Center only vertically
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* width * -0.5 */
}

Gebruik marge: 0 auto;

Objecten kunnen worden gecentreerd met behulp van margin: 0 auto; als het blokelementen zijn en een gedefinieerde breedte hebben.

HTML

<div class="containerDiv">
    <div id="centeredDiv"></div>
</div>

<div class="containerDiv">
    <p id="centeredParagraph">This is a centered paragraph.</p>
</div>

<div class="containerDiv">
    <img id="centeredImage" src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>

CSS

.containerDiv {
    width: 100%;
    height: 100px;
    padding-bottom: 40px;
}

#centeredDiv {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
}

#centeredParagraph {
    width: 200px;
    margin: 0 auto;
}

#centeredImage {
    display: block;
    width: 200px;
    margin: 0 auto;
}

Resultaat:

JSFiddle-voorbeeld: objecten centreren met marge: 0 auto;

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

CSS
centreren

Zoeken…

CSS-transformatie gebruiken

CROSS BROWSER COMPATIBILITEIT

MEER INFORMATIE

Flexbox gebruiken

Gebruik positie: absoluut

Geestelementtechniek (hack van Michał Czernow)

Text-align gebruiken

Centreren ten opzichte van een ander item

Verticaal alles uitlijnen met 3 coderegels

Lijn een afbeelding verticaal uit binnen div

Horizontaal en verticaal centreren met behulp van tabelindeling

Calc () gebruiken

Lijn dynamische hoogte-elementen verticaal uit

Lijnhoogte gebruiken

Verticaal en horizontaal centreren zonder zorgen te maken over hoogte of breedte

De buitenste container

De binnenste container

Het inhoudsvenster

demonstratie

Centreren met vaste maat

Horizontaal centreren met alleen vaste breedte

Verticaal centreren met vaste hoogte

Gebruik marge: 0 auto;