CSS => centre~~POS=TRUNC

Med hjälp av CSS-transform

CSS-omvandlingar är baserade på storleken på elementen, så om du inte vet hur högt eller bredt ditt element är, kan du placera det absolut 50% uppifrån och vänster om en relativ behållare och översätta det med 50% åt vänster och uppåt att centrera den vertikalt och horisontellt.

Tänk på att med denna teknik kan elementet slutas att återges vid en icke-heltal pixelgräns, vilket gör att det ser suddigt ut. Se detta svar i SO för en lösning.

html

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

CSS

.container {
  position: relative;
}

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

Visa exempel i JSFiddle

CROSS BROWSER COMPATIBILITY

Transformationsegenskapen behöver prefix som stöds av äldre webbläsare. Prefix behövs för Chrome <= 35, Safari <= 8, Opera <= 22, Android Browser <= 4.4.4 och IE9. CSS-omvandlingar stöds inte av IE8 och äldre versioner.

Här är en vanlig transformationsdeklaration för föregående exempel:

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

För mer information se canIuse .

MER INFORMATION

Elementet placeras enligt den första icke-statiska föräldern ( position: relative , absolute eller fixed ). Utforska mer i denna fiol och detta dokumentationsämne .

För centrering endast horisontellt använder du left: 50% och transform: translateX(-50%) . Detsamma gäller för vertikal endast centrering: mitt med top: 50% och transform: translateY(-50%) .

Om du använder en icke-statisk bredd / höjdelement med den här metoden för centrering kan det centrerade elementet verka klätt. Detta händer mest med element som innehåller text och kan fixas genom att lägga till: margin-right: -50%; och margin-bottom: -50%; . Se denna fiol för mer information.

Använda Flexbox

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 */
}

Visa resultat

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 */
}

Visa resultat

Se Dynamisk vertikal och horisontell centrering under Flexbox- dokumentationen för mer information om flexbox och vad stilarna betyder.

Webbläsarsupport

Flexbox stöds av alla större webbläsare, utom IE-versioner före 10 .

Vissa senaste webbläsarversioner, som Safari 8 och IE10, kräver leverantörsprefix .

För ett snabbt sätt att generera prefix finns Autoprefixer , ett tredjepartsverktyg.

För äldre webbläsare (som IE 8 & 9) finns en Polyfill tillgänglig .

För en mer detaljerad titt på flexbox-webbläsarsupport, se detta svar .

Använda position: absolut

Arbeta i gamla webbläsare (IE> = 8)

Automatiska marginaler, parade med nollvärden för left och right eller top och bottom , kommer att centrera ett absolut positionerade element i dess överordnade.

Visa resultat

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;
}

Element som inte har sin egen implicita bredd och höjd som bilder gör, behöver de definierade värdena.

Andra resurser: Absolut centrering i CSS

Spökeelementteknik (Michał Czernows hack)

Denna teknik fungerar även när behållarens dimensioner är okända.

Ställ in ett "spöke" -element inuti behållaren som ska centreras som är 100% höjd, använd sedan vertical-align: middle på både det och elementet som ska centreras.

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>

Använda textjustering

Den vanligaste och enklaste typen av centrering är textlinjer i ett element. CSS har regelens text-align: center för detta ändamål:

html

<p>Lorem ipsum</p>

CSS

p {
    text-align: center;
}

Detta fungerar inte för att centrera hela blockelement . text-align styr endast inriktning av inlineinnehåll som text i dess överordnade blockelement.

Se mer om text-align i avsnittet Typografi .

Centrering i förhållande till en annan artikel

Vi kommer att se hur du centrerar innehåll baserat på höjden på ett nära element.

Kompatibilitet: IE8 +, alla andra moderna webbläsare.

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%;
}

Länk till JSFiddle

Huvudpunkterna är de .thumb , .details och .position-container :

.position-container måste ha display: table .
.details måste ha den verkliga bredden inställda width: .... och display: table-cell , vertical-align: middle .
.thumb måste ha width: 100% om du vill att det tar allt återstående utrymme och det kommer att påverkas av .details .
Bilden (om du har en bild) inuti .thumb ska ha width: 100% , men det är inte nödvändigt om du har korrekta proportioner.

Justera vad som helst med tre kodrader

Stöds av IE11 +

Visa resultat

Använd dessa tre rader för att vertikalt justera praktiskt taget allt. Se bara till att div / bilden du använder koden har en förälder med en höjd.

CSS

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

html

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

Justera en bild vertikalt inuti 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;
}

Horisontell och vertikal centrering med tabelllayout

Man kan lätt centrera ett underordnat element med hjälp av table display egendom.

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; 
}

Använda calc ()

Funktionen calc () är delen av en ny syntax i CSS3 där du (matematiskt) kan beräkna vilken storlek / position ditt element upptar genom att använda en mängd olika värden som pixlar, procenttal, etc. Obs! - När du använder den här funktionen , ta alltid hand om utrymmet mellan två värden 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>

Justera vertikala höjdelement vertikalt

Att använda css intuitivt ger inte de önskade resultaten för

vertical-align:middle är inte tillämpligt på blocknivåelement
margin-top:auto och margin-bottom:auto använda värden skulle beräkna som noll
margin-top:-50% procentbaserade marginalvärden beräknas i förhållande till bredden på det innehållande blocket

För bredaste webbläsarsupport, en lösning med hjälpelement:

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 från originalfrågan . Detta tillvägagångssätt

fungerar med dynamiska höjdelement
respekterar innehållsflödet
stöds av gamla webbläsare

Med hjälp av linjehöjd

Du kan också använda line-height att centrera vertikalt en enda rad text i en behållare:

CSS

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

Det är ganska fult, men kan vara användbart i ett <input /> -element. Den line-height egendom fungerar bara när den text som ska centreras spann en enda rad. Om texten går in i flera rader kommer den resulterande utskriften inte att centreras.

Centrera vertikalt och horisontellt utan att oroa dig för höjd eller bredd

Följande teknik låter dig lägga till ditt innehåll i ett HTML-element och centrera det både horisontellt och vertikalt utan att oroa dig för dess höjd eller bredd .

Den yttre behållaren

borde ha display: table;

Den inre behållaren

borde ha display: table-cell;
borde ha vertical-align: middle;
bör ha text-align: center;

Innehållslådan

borde ha display: inline-block;
bör justera den horisontella textinriktningen till t.ex. text-align: left; eller text-align: right; , om du inte vill att text ska vara centrerad

demo

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;
}

Se även denna fiol !

Centrering med fast storlek

Om storleken på ditt innehåll är fast kan du använda absolut positionering till 50% med margin som minskar hälften av innehållets bredd och höjd:

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 */
}

Horisontell centrering med endast fast bredd

Du kan centrera elementet horisontellt även om du inte vet innehållets höjd:

html

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

CSS

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

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

Vertikal centrering med fast höjd

Du kan centrera elementet vertikalt om du vet elementets höjd:

html

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

CSS

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

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

Med marginal: 0 auto;

Objekt kan centreras med hjälp av margin: 0 auto; om de är blockelement och har en definierad bredd.

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;
}

Resultat:

JSFiddle-exempel: Centrera objekt med marginal: 0 auto;

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

CSS
centre~~POS=TRUNC

Sök…

Med hjälp av CSS-transform

CROSS BROWSER COMPATIBILITY

MER INFORMATION

Använda Flexbox

Använda position: absolut

Spökeelementteknik (Michał Czernows hack)

Använda textjustering

Centrering i förhållande till en annan artikel

Justera vad som helst med tre kodrader

Justera en bild vertikalt inuti div

Horisontell och vertikal centrering med tabelllayout

Använda calc ()

Justera vertikala höjdelement vertikalt

Med hjälp av linjehöjd

Centrera vertikalt och horisontellt utan att oroa dig för höjd eller bredd

Den yttre behållaren

Den inre behållaren

Innehållslådan

demo

Centrering med fast storlek

Horisontell centrering med endast fast bredd

Vertikal centrering med fast höjd

Med marginal: 0 auto;