Jak wyśrodkować div dla wszystkich przeglądarek?

1367

Chcę wyśrodkować w divpionie za pomocą CSS. Nie chcę tabel ani JavaScript, ale tylko czysty CSS. Znalazłem kilka rozwiązań, ale we wszystkich brakuje obsługi Internet Explorera 6.

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

Jak mogę wyśrodkować widok divpionowy we wszystkich głównych przeglądarkach, w tym Internet Explorer 6?

css cross-browser alignment vertical-alignment centering

— Burak Erdem
źródło

25

@MarcoDemaio Czy ludzie nie patrzą tablesna układy tutaj?

— Chud37

14

@ Chud37: zależy od tego, co musisz zrobić, tabele układu nie są na ogół uniwersalne i wymagają długiego pisania, dzięki css możesz łatwo zmienić układ 2 kols na układ zolów 3/4/5 itd. Ale w tym przypadku jest inny, stosując dziesiątki porad i wskazówek css do tak prostego zadania, które można wykonać za pomocą doskonałego stołu z przeglądarką, to jak próba wejścia do domu przez okno zamiast korzystania z drzwi.

— Marco Demaio

Jeśli ludzie nie dbają o obsługę starszych przeglądarek: davidwalsh.name/css-vertical-center

— Karolis Šarapnickis

1

css-vertical-center.com istnieje kilka rozwiązań z informacjami o kompatybilności przeglądarki

— EscapeNetscape

2

Oto wiele sposobów na zrobienie tego css-tricks.com/centering-css-complete-guide

— Michael Yurin

Odpowiedzi:

1374

Poniżej znajduje się najlepsze wszechstronne rozwiązanie, jakie udało mi się zbudować, aby wyśrodkować pionowe i poziome pole zawartości o elastycznej wysokości i stałej szerokości . Został przetestowany i działa dla najnowszych wersji Firefox, Opera, Chrome i 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>

Rozwiń fragment kodu

Zobacz przykład roboczy z zawartością dynamiczną

Wbudowałem trochę dynamicznych treści, aby przetestować elastyczność i chciałbym wiedzieć, czy ktoś widzi jakieś problemy. Powinien również dobrze działać dla wyśrodkowanych nakładek - lightbox, pop-up itp.

— Billbad
źródło

Bez „absolutnego” DIV zewnętrznego, dowolna treść na stronie, zanim zepchnie cały blok w dół. Dzięki temu jest bardziej niezależny od innych treści strony.

— Billbad

9

.outer {position:absolute;width:100%;height:100%}nie jest konieczne, są tutaj po prostu do demonstracji. Potrzebujemy tylko display:table, jeśli ktoś jest zdezorientowany tak jak ja.

— twarzy

Zauważyłem, że wymaga to 99%, aby uniknąć pasków przewijania. Co ważniejsze, działa to tylko z dwoma pierwszymi divami, powiedz keep .outeri middlepo prostu zignoruj .innerstyl i jego. Nie wiem o co chodzi margin-left, margin-rightustaw na auto, ponieważ to nie wyśrodkuje elementu poziomo ?? !!!

— user10089632,

Usuwanie width: 100%;i dodawanie margin: 0 autodo .outerumożliwia zmienną szerokość, jak również.

— rokoko

@ user10089632 Nie, nie chodzi o szerokość lub wysokość, ale o pozycję. top: 0; left 0;brakuje, przynajmniej w Chrome, który ustawia domyślnie na 1.

— Michał Woliński

280

Jeszcze jedna nie widzę na liście:

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

Wiele przeglądarek (w tym Internet Explorer 8 - Internet Explorer 10 bez włamań!)
Reaguje na wartości procentowe i min- / maks-
Wyśrodkowany niezależnie od wypełnienia (bez zmiany rozmiaru pudełka!)
heightmusi zostać zadeklarowany (patrz Zmienna wysokość )
Zalecane ustawienie, overflow: autoaby zapobiec rozprzestrzenianiu się treści (patrz Przepełnienie)

_{Źródło: Absolutne centrowanie poziome i pionowe w CSS}

— Yisela
źródło

7

To działało dla mnie, ale z jakiegoś powodu musiałem mieć ustaloną szerokość i wysokość w chromie

— Ryan Knell

1

Dziękuję Ci. Potrzebowałem poprawki, w której nie musiałem obliczać wysokości lub szerokości w pikselach, i to działało idealnie.

— GFoley83

8

Świetne rozwiązanie, zwłaszcza, że nie potrzebujesz rodzica div

— Luca Steeb

1

Wykonuje się to, jeśli wysokość nie jest ustalona, poza tym: fajne rozwiązanie

— Bart Burg

Jeśli masz szerokość i wysokość, które nie są w 100%, użyjmargin: auto;

— Charles L.

253

Najprostszym sposobem byłyby następujące 3 linie CSS:

1) pozycja: względna;

2) góra: 50%;

3) przekształcenie: przetłumacz Y (-50%);

Oto PRZYKŁAD :

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>

Rozwiń fragment kodu

— DrupalFever
źródło

4

Uwaga: nie działa poprawnie, jeśli wysokość zewnętrznego div jest ustawiona na „min-height: 170px”

— Bart Burg

3

— Ingeruje w

4

nie działa, gdy jest heightzewnętrzny . Wtedy działa tylko z . div100%position: absolute;

— Arch Linux Tux,

1

Najpierw znalazłem to rozwiązanie gdzie indziej, ale dodatkowe wyróżnienia dla tej konkretnej odpowiedzi za wspomnienie -webkit-transformw szczególności o wariancie, który potrzebowałem, aby ta metoda działała w phantomjs ... skończyłem godziny zmagań, więc dziękuję!

— drmrbrewer

2

To najlepsza odpowiedź. Jest to niezwykle proste, bałagan z najmniejszą ilością istniejącej pracy i działa na wszystkim tak daleko jak IE9, którego nikt nawet już nie używa. Dajmy temu facetowi jeszcze więcej pochwał!

— Nick Steele,

136

Właściwie potrzebujesz dwóch div do centrowania w pionie. Div zawierający treść musi mieć szerokość i wysokość.

#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>

Rozwiń fragment kodu

— Vadim Ovchinnikov
źródło

4

to stara sztuczka ... górne 50%, a górny margines ujemna połowa wysokości wewnętrznego div

— Manatax

34

zakłada, że masz ustaloną wysokość dla div. nie działają, gdy div może zmienić wysokość.

— Andre Figueiredo

116

Teraz rozwiązanie Flexbox jest bardzo łatwym sposobem dla nowoczesnych przeglądarek, dlatego polecam to dla Ciebie:

.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>

Rozwiń fragment kodu

— Santosh Khalse
źródło

1

Jeśli masz navbar, możesz dostosować wysokość, używając height: calc(100% - 55px)dowolnej wysokości navbar.

— Adrian

Musiałem także usunąć marginesy / wypełnienia z ciała

— Ben

Działa dobrze z float. Dzięki.

— Amir A. Shabani,

Pamiętaj, że może to zachowywać się dziwnie w „nowszych” przeglądarkach mobilnych na safari. Zalecane użycie zamiast wysokości to flex-based w klasie .container

— Nine Magics

78

Edytuj 2020: używaj tego tylko, jeśli potrzebujesz obsługi starych przeglądarek, takich jak IE8 (czego nie powinieneś robić 😉). Jeśli nie, użyj Flexbox.

To najprostsza metoda, którą znalazłem i używam jej przez cały czas ( tutaj demonstracja jsFiddle )

Dziękujemy Chrisowi Coyierowi z CSS Tricks za ten artykuł .

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>

Rozwiń fragment kodu

Wsparcie zaczyna się od IE8.

— Armel Larcier
źródło

Odmawiając obsługi starych przeglądarek, rozwiązaniem dla mnie nie był Flexbox, ale system grid. Dla mnie trochę denerwujące było wyśrodkowanie zawartości w pojemniku, który, gdy staje się zbyt mały, musiał pokazać pasek przewijania, a wyśrodkowana zawartość traciła obszar przewijania wszystkimi innymi metodami. W pojemniku po prostu używam: {display: grid; elementy wyrównujące: środek; } Mam nadzieję, że to komuś pomoże.

— Tomasofen

63

Po wielu badaniach w końcu znalazłem najlepsze rozwiązanie. Działa nawet w przypadku elementów pływających. Pokaż źródło

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

— ymakux
źródło

4

Działa to naprawdę dobrze, pod warunkiem, że pamiętasz, że element kontenera musi mieć niejawną lub jawną wysokość; jsfiddle.net/14kt53un Niewielkie problemy dla tych, którzy są stosunkowo nowi w CSS.

— Martyn Shutt,

6

Ze wszystkich odpowiedzi jest to najprostsze! Mam nadzieję, że inni też zobaczą twoją odpowiedź! Dziękuję Ci! Nawiasem mówiąc, 50%pracował dla mnie (nie -50%)

— The Codesee

To było niesamowite. Po wielu godzinach poszukiwań ten działał dla mnie. Musiałem użyć translateY (50%) Jestem pewien, dlaczego, ale zadziałało. W moim przypadku element nadrzędny został utworzony przez silnik AEM Forms Engine i mogę kontrolować tylko niektóre elementy potomne.

— tarekahf

41

Rozwiązanie Flexbox

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

Rozwiń fragment kodu

— Reggie Pinkham
źródło

3

Uwaga justify-content: centerwyśrodkuje również przedmioty w poziomie

— Peter Berg,

36

Aby wyśrodkować div na stronie, sprawdź link do skrzypki .

#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>

Rozwiń fragment kodu

Inną opcją jest użycie pola elastycznego, zaznacz link skrzypce .

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Rozwiń fragment kodu

Inną opcją jest użycie transformacji CSS 3:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.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>

Rozwiń fragment kodu

— Nerdroid
źródło

3

@ArmelLarcier To nieprawda. Jednostki względne procenty %, emy i remy. Wartości bezwzględne lub stałe to piksele lub punkty. Mówisz o „działa tylko z zadeklarowaną wysokością”. Jednak chociaż ta metoda opisana przez Moesa wymaga wysokości, kiedy deklarujesz ją w jednostkach względnych, procent jest najlepszy, bez względu na to, ile treści znajduje się w środku DIV, że DIV rozszerzy się pionowo, aby dopasować się do jego zawartości. To jest piękno tej metody. Inną dobrą rzeczą jest to, że ta metoda działa w IE8 / 9/10 na wypadek, gdyby ktoś nadal musiał obsługiwać te przeglądarki.

— Ricardo Zea

@ricardozea Nie chcę grać upartego, ale mówienie, że wyśrodkowany div będzie się rozwijał w pionie, podczas gdy pozostawanie w środku jest błędne. Spróbuj. Wiem, kiedy mówię, że wysokość musi być „ustalona”, że to nie jest właściwe słowo. Jest rzeczywiście względny względem jego rodzica. W każdym razie myślę, że metoda Chrisa Coyera ma większy sens, zobacz moją odpowiedź stackoverflow.com/a/21919578/1491212 Jest kompatybilny z IE8 ORAZ działa na elemencie bez określonych wymiarów.

— Armel Larcier

1

@ArmelLarcier Wszystko dobrze. Nie jest źle, bracie. Spróbuj: codepen.io/shshaw/pen/gEiDt - Dodaj akapity do zielonego pola;]. To prawda, że używa Modernizra, aby osiągnąć ten efekt, ale w sumie jest to wykonalne. Widziałem również twoją odpowiedź i post CSS-Tricks.com, ale ta metoda mnie nie uszczęśliwia, wykorzystuje dodatkowe znaczniki, a CSS jest zbyt gadatliwy. Myślę, że najlepszym rozwiązaniem jest użycie Flexbox lub transform: translate(-50%, -50%);techniki. W przypadku IE8 zostawiłbym wyrównany góra / środek i ruszyłem dalej.

— Ricardo Zea,

1

@ricardozea Cóż, codepen, do którego linkujesz, używa metody „display: table” i dodatkowych znaczników, więc nie jestem zaskoczony. W każdym razie +1 do ostatniego zdania.

— Armel Larcier

23

Najłatwiejsze rozwiązanie znajduje się poniżej:

.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>

Rozwiń fragment kodu

— Varsha Dhadge
źródło

2

Rzeczywiście najłatwiejszy jak dotąd :) Chociaż musiałem ustawić style na zewnętrzny div, zamiast na body.

— baburao

21

Niestety - ale nie jest to zaskakujące - rozwiązanie jest bardziej skomplikowane, niż by się tego spodziewało. Niestety, musisz użyć dodatkowych elementów div wokół elementu, który chcesz wyśrodkować w pionie.

W przeglądarkach zgodnych ze standardami, takich jak Mozilla, Opera, Safari itp., Musisz ustawić zewnętrzny div, aby był wyświetlany jako tabela, a wewnętrzny div, aby był wyświetlany jako komórka tabeli - który następnie można wyśrodkować w pionie. W przypadku przeglądarki Internet Explorer musisz ustawić absolutnie wewnętrzny div wewnątrz zewnętrznego div, a następnie określić górną wartość jako 50% . Następujące strony dobrze wyjaśniają tę technikę i dostarczają również kilka przykładów kodu:

Centrowanie pionowe w CSS
~~Centrowanie w pionie w CSS o nieznanej wysokości (kompatybilny z Internet Explorer 7)~~ (już nie aktywny)
Centrowanie w pionie w CSS o nieznanej wysokości (kompatybilny z Internet Explorer 7) (artykuł w archiwum dzięki uprzejmości Wayback Machine)

Istnieje również technika wykonywania centrowania pionowego za pomocą JavaScript. Dowodzi tego pionowe wyrównanie treści za pomocą JavaScript i CSS .

— sids
źródło

20

Jeśli komuś zależy tylko na przeglądarce Internet Explorer 10 (i nowszych), użyj 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>

Rozwiń fragment kodu

Obsługa Flexbox: http://caniuse.com/flexbox

— brawur
źródło

Android <4.4 nie obsługuje align-items: center;!

— André Fiedler

W rzeczywistości obsługuje align-items: center; caniuse.com/#search=align-items

— t.mikael.d

@ t.mikael.d Możesz przyjrzeć się bliżej tej tabeli. W przypadku Androida <4.4 napis „Obsługuje tylko starą specyfikację Flexbox i nie obsługuje zawijania”.

— Nathan Osman

15

Byłby to nowoczesny sposób na wyśrodkowanie elementu w pionie flexbox.

Potrzebny jest rodzic, aby zdecydować o wysokości, a dziecko do wyśrodkowania.

Poniższy przykład wyśrodkuje div do centrum w przeglądarce. Co ważne (w moim przykładzie) jest ustawiony height: 100%na bodyi html, a następnie min-height: 100%do pojemnika.

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>

Rozwiń fragment kodu

— Marwelln
źródło

14

Centrowanie tylko pionowo

Jeśli nie obchodzi Cię Internet Explorer 6 i 7, możesz użyć techniki obejmującej dwa kontenery.

Zewnętrzny pojemnik:

powinien mieć display: table;

Wewnętrzny pojemnik:

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

Pole zawartości:

powinien mieć display: inline-block;

Możesz dodać dowolną treść do pola zawartości, nie dbając o jej szerokość lub wysokość!

Próbny:

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>

Rozwiń fragment kodu

Zobacz także to skrzypce !

Centrowanie w poziomie i w pionie

Jeśli chcesz wyśrodkować zarówno w poziomie, jak i w pionie, potrzebujesz również następujących elementów.

Wewnętrzny pojemnik:

powinien mieć text-align: center;

Pole zawartości:

należy ponownie wyrównać wyrównanie tekstu w poziomie na przykład text-align: left;lub text-align: right;, chyba że chcesz, aby tekst był wyśrodkowany

Próbny:

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

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

Rozwiń fragment kodu

Zobacz także to skrzypce !

— John Slegers
źródło

13

.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>

Rozwiń fragment kodu

Powiązane: Wyśrodkuj obraz

— antylopa
źródło

10

Zawsze tam, gdzie muszę, wracam do tego problemu .

Dla tych, którzy nie chcą skakać:

Określ kontener nadrzędny jako position:relativelub position:absolute.
Określ stałą wysokość na kontenerze podrzędnym.
Ustaw position:absolutei top:50%na kontenerze potomnym, aby przesunąć górę w dół na środek rodzica.
Ustaw margines na górze: -rr, gdzie yy jest połową wysokości kontenera podrzędnego, aby przesunąć element w górę.

Przykład tego w kodzie:

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

— Ninx
źródło

9

Korzystanie z właściwości flex CSS.

.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>

Rozwiń fragment kodu

lub za pomocą display: flex;imargin: auto;

Pokaż fragment kodu

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}

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

Rozwiń fragment kodu

pokaż centrum tekstowe

Pokaż fragment kodu

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}

<div class="parent">Center</div>

Rozwiń fragment kodu

Używając procentowej (%) wysokości i szerokości.

Pokaż fragment kodu

.parent {
    position: absolute;
    height:100%;
    width:100%;
    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>

Rozwiń fragment kodu

— Deepu Reghunath
źródło

8

Właśnie napisałem ten CSS i aby dowiedzieć się więcej, proszę przejść przez: Ten artykuł z pionowym wyrównaniem czegokolwiek z zaledwie 3 liniami CSS .

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

— Sanjib Debnath
źródło

1

Transformacje CSS mogą powodować zniekształcenia tekstu i ramek (gdy matematyka daje piksele ułamkowe).

— Nathan K,

5

Siatka CSS

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

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

Rozwiń fragment kodu

— Andy Hoffman
źródło

5

Dla nowych chętnych spróbuj

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

— Usman I
źródło

1

Dodaj Snippet stosu pokazujący, w jaki sposób ten kod CSS wyrównuje w pionie a div.

— Heretic Monkey

to też działa <div style="display:flex"><div style="margin:auto">Inner</div></div>

— idrisadetunmbi

Natknąłem się na to cudowne wyjaśnienie wyrównywania przedmiotów i uzasadniania treści. Musisz przeczytać: stackoverflow.com/questions/42613359/…

— Usman I

4

Odpowiedź z Billbad działa tylko ze stałą szerokością .innerdiv. To rozwiązanie działa dla dynamicznej szerokości poprzez dodanie atrybutu text-align: centerdo .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>

Rozwiń fragment kodu

— Ruwen
źródło

Ciekawy! Używam prawie identycznej techniki! -> stackoverflow.com/questions/396145/…

— John Slegers

4

Trzy wiersze kodu używającego transformdziałają praktycznie w nowoczesnych przeglądarkach i Internet Explorerze:

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

Dodam tę odpowiedź, ponieważ w poprzedniej wersji tej odpowiedzi znalazłem trochę niekompletności (a Przepełnienie stosu nie pozwoli mi po prostu komentować).

Relacja „pozycja” zmienia styl, jeśli obecny div jest w ciele i nie ma div pojemnika. Wydaje się jednak, że „naprawiony” działa, ale w oczywisty sposób naprawia zawartość w środku okienka ekranu
Użyłem również tej stylizacji do wyśrodkowania niektórych div div nakładki i odkryłem, że w Mozilli wszystkie elementy w tej transformowanej div straciły swoje dolne granice. Prawdopodobnie problem z renderowaniem. Ale dodanie tylko minimalnego dopełnienia do niektórych z nich sprawiło, że poprawnie. Chrome i Internet Explorer (co zaskakujące) renderowały pudełka bez potrzeby wypełniania

— MandarK
źródło

3

Poniższy link przedstawia prosty sposób na zrobienie tego za pomocą zaledwie 3 linii w CSS:

Wyrównaj wszystko w pionie za pomocą zaledwie 3 linii CSS .

Podziękowania dla : Sebastian Ekström .

Wiem, że pytanie ma już odpowiedź, ale widziałem użyteczność w linku dla jego prostoty.

— Hicaro
źródło

3

Nie odpowiada na kompatybilność przeglądarki, ale wspomina także o nowej Grid i niezbyt nowej funkcji Flexbox.

Krata

Od: Mozilla - Dokumentacja siatki - Align Div Vertical

Obsługa przeglądarki: Obsługa przeglądarki Grid

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

Obsługa przeglądarki: Obsługa przeglądarki Flexbox

CSS:

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

— Ctekk
źródło

3

Myślę, że solidne rozwiązanie dla wszystkich przeglądarek bez korzystania z Flexbox - „align-items: center;” jest kombinacją wyświetlania: table i 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>

Emdemo: https://jsfiddle.net/6m640rpp/

— Martin Wantke
źródło

2

Zrobiłem to z tym (odpowiednio zmień szerokość, wysokość, margines górny i margines lewy):

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

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

— Netuddki
źródło

To dobrze, jeśli znasz szerokość / wysokość DIV, którą próbujesz wyśrodkować. To nie jest pytanie

— egr103,

2

Zawartość można łatwo wyśrodkować za pomocą Flexbox. Poniższy kod pokazuje CSS kontenera, w którym zawartość musi być wyśrodkowana:

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

— Mahendra Liya
źródło

2

Zwłaszcza w przypadku div rodzica o względnej (nieznanej) wysokości centrowanie w nieznanym rozwiązaniu działa dla mnie świetnie. W artykule jest kilka naprawdę dobrych przykładów kodu.

Został przetestowany w Chrome, Firefox, Opera i 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>

Rozwiń fragment kodu

— Ruwen
źródło

2

Po prostu zrób to: dodaj klasę do div:

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

I przeczytaj ten artykuł, aby uzyskać wyjaśnienie. Uwaga: Heightjest konieczne.

— Anszul
źródło

2

Jest pewna sztuczka, którą ostatnio odkryłem: musisz użyć, top 50%a następnie zrobićtranslateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

Rozwiń fragment kodu

— Melchia
źródło

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.

Licensed under cc by-sa 3.0 with attribution required.