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

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

Oto wynik

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

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

Odpowiedzi:

Rozwiązanie Flexbox

Centrowanie tylko pionowo

Zewnętrzny pojemnik:

Wewnętrzny pojemnik:

Pole zawartości:

Próbny:

Centrowanie w poziomie i w pionie

Wewnętrzny pojemnik:

Pole zawartości:

Próbny:

Siatka CSS

CSS

HTML