CSS => Krążyna

Korzystanie z transformacji CSS

Transformacje CSS są oparte na rozmiarze elementów, więc jeśli nie wiesz, jak wysoki lub szeroki jest twój element, możesz ustawić go absolutnie 50% od góry i na lewo od względnego kontenera i przetłumaczyć go o 50% w lewo i w górę aby wyśrodkować go w pionie i poziomie.

Należy pamiętać, że dzięki tej technice element może zostać zrenderowany na granicy pikseli niecałkowitych, co spowoduje, że będzie rozmazany. Zobacz tę odpowiedź w SO w celu obejścia tego problemu.

HTML

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

CSS

.container {
  position: relative;
}

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

Zobacz przykład w JSFiddle

KOMPATYBILNOŚĆ KRZYŻOWEGO PRZEGLĄDARKI

Właściwość transform wymaga prefiksów, które będą obsługiwane przez starsze przeglądarki. Prefiksy są potrzebne dla Chrome <= 35, Safari <= 8, Opera <= 22, Android Browser <= 4.4.4 i IE9. Transformacje CSS nie są obsługiwane przez IE8 i starsze wersje.

Oto wspólna deklaracja transformacji dla poprzedniego przykładu:

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

Aby uzyskać więcej informacji, zobacz canIuse .

WIĘCEJ INFORMACJI

Element jest pozycjonowany zgodnie z pierwszym niestatycznym elementem nadrzędnym ( position: relative , absolute lub fixed ). Dowiedz się więcej w tym skrzypcach i temacie dokumentacji .

Aby wyśrodkować tylko w poziomie, użyj left: 50% i transform: translateX(-50%) . To samo dotyczy centrowania tylko w pionie: środek z top: 50% i transform: translateY(-50%) .

Zastosowanie niestatycznych elementów szerokości / wysokości z tą metodą centrowania może spowodować, że wyśrodkowany element będzie wyglądał na ściśnięty. Dzieje się tak głównie w przypadku elementów zawierających tekst i można to naprawić, dodając: margin-right: -50%; i margin-bottom: -50%; . Zobacz to skrzypce, aby uzyskać więcej informacji.

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

Pokaż rezultat

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

Pokaż rezultat

Zobacz Dynamiczne centrowanie w pionie i poziomie w dokumentacji Flexbox, aby uzyskać więcej informacji na temat Flexbox i znaczenia stylów.

Obsługa przeglądarki

Flexbox jest obsługiwany przez wszystkie główne przeglądarki, z wyjątkiem wersji IE wcześniejszych niż 10 .

Niektóre najnowsze wersje przeglądarek, takie jak Safari 8 i IE10, wymagają prefiksów dostawców .

Szybkim sposobem generowania prefiksów jest Autoprefixer , narzędzie innych firm.

W przypadku starszych przeglądarek (takich jak IE 8 i 9) dostępna jest funkcja Polyfill .

Aby uzyskać bardziej szczegółowe informacje na temat obsługi przeglądarki Flexbox, zobacz tę odpowiedź .

Przy użyciu pozycji: bezwzględna

Praca w starych przeglądarkach (IE> = 8)

Automatyczne marginesy, w połączeniu z wartościami zero dla left i right lub top i bottom przesunięcia, wyśrodkują absolutnie pozycjonowane elementy w obrębie elementu nadrzędnego.

Pokaż rezultat

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

Elementy, które nie mają własnej domyślnej szerokości i wysokości, tak jak obrazy, będą musiały zdefiniować te wartości.

Inne zasoby: Absolutne centrowanie w CSS

Technika elementów duchów (hack Michała Czernowa)

Ta technika działa nawet wtedy, gdy wymiary pojemnika są nieznane.

Ustaw element „ducha” w środku kontenera, który ma być wyśrodkowany na 100% wysokości, a następnie użyj vertical-align: middle zarówno na tym, jak i na elemencie, który ma być wyśrodkowany.

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>

Korzystanie z wyrównania tekstu

Najczęstszym i najłatwiejszym sposobem centrowania jest linia tekstu w elemencie. CSS ma regułę text-align: center w tym celu:

HTML

<p>Lorem ipsum</p>

CSS

p {
    text-align: center;
}

Nie działa to w przypadku centrowania całych elementów bloku . text-align kontroluje tylko wyrównanie treści śródliniowej, takiej jak tekst w jej nadrzędnym elemencie blokowym.

Zobacz więcej na temat text-align w sekcji Typografia .

Centrowanie w stosunku do innego elementu

Zobaczymy, jak wyśrodkować zawartość na podstawie wysokości bliskiego elementu.

Kompatybilność: IE8 +, wszystkie inne nowoczesne przeglądarki.

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 do JSFiddle

Główne punkty to 3 .thumb , .details i .position-container pojemniki:

.position-container musi mieć display: table .
.details muszą mieć rzeczywistą szerokość ustawioną width: .... i display: table-cell , vertical-align: middle .
.thumb musi mieć width: 100% jeśli chcesz, że zajmie całą pozostałą przestrzeń i będzie .details szerokości .details .
Obraz (jeśli masz obraz) wewnątrz .thumb powinien mieć width: 100% , ale nie jest konieczne, jeśli masz właściwe proporcje.

Wyrównaj wszystko w pionie za pomocą 3 linii kodu

Obsługiwane przez IE11 +

Pokaż rezultat

Użyj tych 3 linii do pionowego wyrównania praktycznie wszystkiego. Upewnij się tylko, że div / image, do którego zastosujesz kod, ma element nadrzędny o wysokości.

CSS

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

HTML

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

Wyrównaj obraz w pionie do 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;
}

Centrowanie w poziomie i pionie za pomocą układu tabeli

Można łatwo wyśrodkować element potomny za pomocą właściwości wyświetlania 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; 
}

Korzystanie z funkcji calc ()

Funkcja calc () jest częścią nowej składni w CSS3, w której można obliczyć (matematycznie), jaki rozmiar / pozycja zajmuje element przy użyciu różnych wartości, takich jak piksele, wartości procentowe itp. Uwaga: - Zawsze, gdy używasz tej funkcji , zawsze dbaj o odstęp między dwiema wartościami 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>

Wyrównaj w pionie dynamiczne elementy wysokości

Intuicyjne stosowanie css nie daje pożądanych rezultatów, ponieważ

vertical-align:middle nie ma zastosowania do elementów na poziomie bloku
margin-top:auto i margin-bottom:auto używane wartości margin-bottom:auto byłyby obliczane jako zero
margin-top:-50% procentowe wartości marginesów są obliczane w zależności od szerokości zawierającego bloku

Aby uzyskać najszerszą obsługę przeglądarki, obejście z elementami pomocniczymi:

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 z oryginalnego pytania . To podejście

współpracuje z dynamicznymi elementami wysokości
szanuje przepływ treści
jest obsługiwany przez starsze przeglądarki

Korzystanie z wysokości linii

Możesz także użyć line-height do wyśrodkowania w pionie pojedynczej linii tekstu w kontenerze:

CSS

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

To dość brzydkie, ale może być przydatne w elemencie <input /> . Właściwość line-height działa tylko wtedy, gdy wyśrodkowany tekst obejmuje jedną linię. Jeśli tekst zostanie zawinięty w wiele wierszy, wynikowy wynik nie zostanie wyśrodkowany.

Centrowanie w pionie i poziomie bez obawy o wysokość lub szerokość

Poniższa technika umożliwia dodanie treści do elementu HTML i wyśrodkowanie go zarówno w poziomie, jak i w pionie, bez obawy o jego wysokość lub szerokość .

Zewnętrzny pojemnik

powinien mieć display: table;

Wewnętrzny pojemnik

powinien mieć display: table-cell;
powinien mieć vertical-align: middle;
powinien mieć text-align: center;

Pole zawartości

powinien mieć display: inline-block;
powinien ponownie wyrównać wyrównanie tekstu w poziomie, np. text-align: left; lub text-align: right; , chyba że chcesz, aby tekst był wyśrodkowany

Próbny

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

Zobacz także to skrzypce !

Centrowanie ze stałym rozmiarem

Jeśli rozmiar zawartości jest stały, możesz użyć pozycjonowania bezwzględnego do 50% z margin który zmniejsza połowę szerokości i wysokości treści:

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

Centrowanie poziome z tylko stałą szerokością

Możesz wyśrodkować element w poziomie, nawet jeśli nie znasz wysokości zawartości:

HTML

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

CSS

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

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

Centrowanie pionowe o stałej wysokości

Możesz wyśrodkować element w pionie, jeśli znasz jego wysokość:

HTML

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

CSS

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

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

Korzystanie z marginesu: 0 auto;

Obiekty można wycentrować za pomocą margin: 0 auto; jeśli są elementami blokowymi i mają określoną szerokość.

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

Wynik:

Przykład JSFiddle: Centrowanie obiektów z marginesem: 0 auto;

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

CSS
Krążyna

Szukaj…

Korzystanie z transformacji CSS

KOMPATYBILNOŚĆ KRZYŻOWEGO PRZEGLĄDARKI

WIĘCEJ INFORMACJI

Korzystanie z Flexbox

Przy użyciu pozycji: bezwzględna

Technika elementów duchów (hack Michała Czernowa)

Korzystanie z wyrównania tekstu

Centrowanie w stosunku do innego elementu

Wyrównaj wszystko w pionie za pomocą 3 linii kodu

Wyrównaj obraz w pionie do div

Centrowanie w poziomie i pionie za pomocą układu tabeli

Korzystanie z funkcji calc ()

Wyrównaj w pionie dynamiczne elementy wysokości

Korzystanie z wysokości linii

Centrowanie w pionie i poziomie bez obawy o wysokość lub szerokość

Zewnętrzny pojemnik

Wewnętrzny pojemnik

Pole zawartości

Próbny

Centrowanie ze stałym rozmiarem

Centrowanie poziome z tylko stałą szerokością

Centrowanie pionowe o stałej wysokości

Korzystanie z marginesu: 0 auto;