Umieszczanie elementu <div> na środku ekranu

Question 1

Chcę umieścić element <div>(lub <table>) na środku ekranu, niezależnie od rozmiaru ekranu. Innymi słowy, przestrzeń po lewej stronie „na górze” i „na dole” powinna być równa, a przestrzeń po lewej stronie po stronie „prawej” i „lewej” powinna być równa. Chciałbym to osiągnąć tylko za pomocą CSS.

Próbowałem wykonać następujące czynności, ale nie działa:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Uwaga:
tak czy inaczej jest w porządku, jeśli <div>element (lub <table>) przewija się wraz ze stroną internetową, czy nie. Po prostu chcę, aby był wyśrodkowany podczas ładowania strony.

Question 2

Prosty sposób, jeśli masz stałą szerokość i wysokość:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

Nie używaj stylów wbudowanych! Oto działający przykład http://jsfiddle.net/S5bKq/ .

Question 3

Ponieważ transformacje są obecnie bardziej wszechobecne, możesz to zrobić bez znajomości szerokości / wysokości wyskakującego okienka

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Łatwy! JSFiddle tutaj: http://jsfiddle.net/LgSZV/

Aktualizacja: Odwiedź https://css-tricks.com/centering-css-complete-guide/, aby uzyskać dość wyczerpujący przewodnik po centrowaniu CSS. Dodając to do tej odpowiedzi, wydaje się, że ma dużo gałek ocznych.

Question 4

Ustaw szerokość i wysokość i jesteś dobry.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Jeśli chcesz, aby wymiary elementu były elastyczne (i nie przejmujesz się starszymi przeglądarkami), skorzystaj z odpowiedzi XwipeoutX .

Question 5

Będzie działać na każdym obiekcie. Nawet jeśli nie znasz rozmiaru:

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

Question 6

Teraz jest łatwiej z HTML 5 i CSS 3:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

Question 7

Jeśli masz stałą, divtylko bezwzględną pozycję, to na 50% od góry i 50% z lewej i ujemny margines odpowiednio na górze i na lewo od połowy wysokości i szerokości. Dostosuj się do swoich potrzeb:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

Question 8

Użyj flex . Dużo prostsze i będzie działać niezależnie od Twojego divrozmiaru:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Rozwiń fragment

Question 9

Zrobiłbym to w CSS:

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

następnie w HTML:

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

Question 10

Spróbuj tego

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

Albo to

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

Question 11

Jeśli jest ktoś, kto szuka rozwiązania,

Znalazłem to,

To najlepsze rozwiązanie, jakie znalazłem!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

Mam nadzieję, że ci się podoba!

Question 12

Kolejne łatwe i elastyczne podejście do wyświetlania bloku na środku: użycie natywnego wyrównania tekstu z line-heighti text-align.

Rozwiązanie:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

I próbka html:

<div class="parent">
  <div class="child">My center block</div>
</div>

Robimy div.parentpełny ekran, a jego jedno dziecko jest div.childwyrównywane jako tekst display: inline-block.

Zalety:

elastyczność, brak wartości bezwzględnych
obsługa zmiany rozmiaru
działa dobrze na urządzeniach mobilnych

Prosty przykład na JSFiddle: https://jsfiddle.net/k9u6ma8g

Question 13

Alternatywne rozwiązanie, które nie używa pozycji bezwzględnej:
widzę wiele odpowiedzi bezwzględnych dotyczących pozycji. Nie mogłem użyć pozycji absolutnej bez zepsucia czegoś innego. Więc dla tych, którzy również nie mogli, oto co zrobiłem:
https://stackoverflow.com/a/58622840/6546317 (opublikowane w odpowiedzi na inne pytanie).

Rozwiązanie skupia się tylko na wyśrodkowaniu w pionie, ponieważ moje elementy dzieci były już wyśrodkowane w poziomie, ale to samo można zastosować, jeśli nie można ich wyśrodkować w poziomie w inny sposób.

Question 14

Spróbuj tego:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

Answer 1

138

Chcę umieścić element <div>(lub <table>) na środku ekranu, niezależnie od rozmiaru ekranu. Innymi słowy, przestrzeń po lewej stronie „na górze” i „na dole” powinna być równa, a przestrzeń po lewej stronie po stronie „prawej” i „lewej” powinna być równa. Chciałbym to osiągnąć tylko za pomocą CSS.

Próbowałem wykonać następujące czynności, ale nie działa:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Uwaga:
tak czy inaczej jest w porządku, jeśli <div>element (lub <table>) przewija się wraz ze stroną internetową, czy nie. Po prostu chcę, aby był wyśrodkowany podczas ładowania strony.

javascript css html sumit
źródło

1

możliwy duplikat Jak wyrównać <div> do środka strony

Purag

Cześć Purmou, pytanie, o którym wspomniałeś, dotyczy pozycjonowania na środku strony, tj. Po lewej i prawej stronie równe miejsce - a nie równe miejsce na górze i na dole!

sumit

1

możliwy duplikat Jak najlepiej

wyśrodkować

możliwy duplikat Jak wyśrodkować element DIV w elemencie DIV - poziomo?

bjb568,

Answer 2

1

możliwy duplikat Jak wyrównać <div> do środka strony

Purag

Answer 3

Cześć Purmou, pytanie, o którym wspomniałeś, dotyczy pozycjonowania na środku strony, tj. Po lewej i prawej stronie równe miejsce - a nie równe miejsce na górze i na dole!

sumit

Answer 4

1

możliwy duplikat Jak najlepiej

wyśrodkować

Answer 5

możliwy duplikat Jak wyśrodkować element DIV w elemencie DIV - poziomo?

bjb568,

Answer 6

208

Prosty sposób, jeśli masz stałą szerokość i wysokość:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

Nie używaj stylów wbudowanych! Oto działający przykład http://jsfiddle.net/S5bKq/ .

einstein
źródło

13

Dla tych, którzy szukają dynamicznej wysokości: stackoverflow.com/questions/396145/…

pulkitsinghal

1

@ woho87 dlaczego nie użyć stylów wbudowanych? z dobrze znanych powodów, czy może jest coś więcej, o czym powinienem wiedzieć w konkretnym przykładzie?

Sharky

@KatrinRaimond dzieje się tak z dobrze znanych powodów, udokumentowanych tutaj stackoverflow.com/questions/2612483/ ... i tutaj webdesign.about.com/od/css/a/aa073106.htm .

Alex

Jednak ustawienie góry elementu divElement w jednostce „%” powoduje, że element divElement zajmuje miejsce w pionie, chyba że element divElement zostanie umieszczony wewnątrz elementu względnego.

sudip

czy pozycja: stała czy pozycja: bezwzględna?

Kurkula

Answer 7

13

Dla tych, którzy szukają dynamicznej wysokości: stackoverflow.com/questions/396145/…

pulkitsinghal

Answer 8

1

@ woho87 dlaczego nie użyć stylów wbudowanych? z dobrze znanych powodów, czy może jest coś więcej, o czym powinienem wiedzieć w konkretnym przykładzie?

Sharky

Answer 9

@KatrinRaimond dzieje się tak z dobrze znanych powodów, udokumentowanych tutaj stackoverflow.com/questions/2612483/ ... i tutaj webdesign.about.com/od/css/a/aa073106.htm .

Alex

Answer 10

Jednak ustawienie góry elementu divElement w jednostce „%” powoduje, że element divElement zajmuje miejsce w pionie, chyba że element divElement zostanie umieszczony wewnątrz elementu względnego.

sudip

Answer 11

czy pozycja: stała czy pozycja: bezwzględna?

Kurkula

Answer 12

156

Ponieważ transformacje są obecnie bardziej wszechobecne, możesz to zrobić bez znajomości szerokości / wysokości wyskakującego okienka

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Łatwy! JSFiddle tutaj: http://jsfiddle.net/LgSZV/

Aktualizacja: Odwiedź https://css-tricks.com/centering-css-complete-guide/, aby uzyskać dość wyczerpujący przewodnik po centrowaniu CSS. Dodając to do tej odpowiedzi, wydaje się, że ma dużo gałek ocznych.

XwipeoutX
źródło

1

Jeśli zawartość wyskakującego okienka używa overflow:auto, przewijanie jest schrzanione w IE9. :(

joescii

2

Nie tak ubiquos. IE8 nadal zajmuje 20% udziału w przeglądarce i go nie obsługuje . Więc weź tylko ten dla IE9 +.

fotanus

7

+1 za jedyne rozwiązanie, w którym nie musisz określać wysokości i szerokości ani używać Javascript.

Jan Derk,

@fotanus, gdy programiści przestaną wspierać IE 9 <, użytkownicy albo dokonają migracji, albo zaktualizują swoją przeglądarkę.

Diego Vieira

@DIegoVieira to niestety nie działa. Zobacz tragedię wspólnego pastwiska . Dlatego ludzie będą nadal wspierać IE8, ponieważ nie chcą stracić tego udziału, a ludzie będą nadal używać, ponieważ działa.

fotanus

Answer 13

1

Jeśli zawartość wyskakującego okienka używa overflow:auto, przewijanie jest schrzanione w IE9. :(

joescii

Answer 14

2

Nie tak ubiquos. IE8 nadal zajmuje 20% udziału w przeglądarce i go nie obsługuje . Więc weź tylko ten dla IE9 +.

fotanus

Answer 15

7

+1 za jedyne rozwiązanie, w którym nie musisz określać wysokości i szerokości ani używać Javascript.

Jan Derk,

Answer 16

@fotanus, gdy programiści przestaną wspierać IE 9 <, użytkownicy albo dokonają migracji, albo zaktualizują swoją przeglądarkę.

Diego Vieira

Answer 17

@DIegoVieira to niestety nie działa. Zobacz tragedię wspólnego pastwiska . Dlatego ludzie będą nadal wspierać IE8, ponieważ nie chcą stracić tego udziału, a ludzie będą nadal używać, ponieważ działa.

fotanus

Answer 18

36

Ustaw szerokość i wysokość i jesteś dobry.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Jeśli chcesz, aby wymiary elementu były elastyczne (i nie przejmujesz się starszymi przeglądarkami), skorzystaj z odpowiedzi XwipeoutX .

Erik Aigner
źródło

1

To najczystsza i najprostsza odpowiedź, a także przyjazna dla urządzeń mobilnych . +1

GoalsAndGambles

Działa dobrze, ale jaka jest logika tego działania?

Lukas

Answer 19

1

To najczystsza i najprostsza odpowiedź, a także przyjazna dla urządzeń mobilnych . +1

GoalsAndGambles

Answer 20

Działa dobrze, ale jaka jest logika tego działania?

Lukas

Answer 21

23

Będzie działać na każdym obiekcie. Nawet jeśli nie znasz rozmiaru:

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

świetlistych ludzi
źródło

Answer 22

Teraz jest łatwiej z HTML 5 i CSS 3:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

Answer 23

Jeśli masz stałą, divtylko bezwzględną pozycję, to na 50% od góry i 50% z lewej i ujemny margines odpowiednio na górze i na lewo od połowy wysokości i szerokości. Dostosuj się do swoich potrzeb:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

Answer 24

Użyj flex . Dużo prostsze i będzie działać niezależnie od Twojego divrozmiaru:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Rozwiń fragment

Answer 25

3

Zrobiłbym to w CSS:

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

następnie w HTML:

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

Eduardo Lago Aguilar
źródło

Answer 26

Spróbuj tego

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

Albo to

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

Answer 27

Jeśli jest ktoś, kto szuka rozwiązania,

Znalazłem to,

To najlepsze rozwiązanie, jakie znalazłem!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

Mam nadzieję, że ci się podoba!

Answer 28

Kolejne łatwe i elastyczne podejście do wyświetlania bloku na środku: użycie natywnego wyrównania tekstu z line-heighti text-align.

Rozwiązanie:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

I próbka html:

<div class="parent">
  <div class="child">My center block</div>
</div>

Robimy div.parentpełny ekran, a jego jedno dziecko jest div.childwyrównywane jako tekst display: inline-block.

Zalety:

elastyczność, brak wartości bezwzględnych
obsługa zmiany rozmiaru
działa dobrze na urządzeniach mobilnych

Prosty przykład na JSFiddle: https://jsfiddle.net/k9u6ma8g

Answer 29

Alternatywne rozwiązanie, które nie używa pozycji bezwzględnej:
widzę wiele odpowiedzi bezwzględnych dotyczących pozycji. Nie mogłem użyć pozycji absolutnej bez zepsucia czegoś innego. Więc dla tych, którzy również nie mogli, oto co zrobiłem:
https://stackoverflow.com/a/58622840/6546317 (opublikowane w odpowiedzi na inne pytanie).

Rozwiązanie skupia się tylko na wyśrodkowaniu w pionie, ponieważ moje elementy dzieci były już wyśrodkowane w poziomie, ale to samo można zastosować, jeśli nie można ich wyśrodkować w poziomie w inny sposób.

Answer 30

-2

Spróbuj tego:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

user3423956
źródło

2

W rzeczywistości jest to to samo, co przyjęta odpowiedź

apaul

tak, ale tutaj wyjaśnię działanie górnego i lewego marginesu ... ktoś tego nie wie ....

user3423956

1

Wtedy jest to faktycznie to samo, co druga odpowiedź

apaul

Answer 31

2

W rzeczywistości jest to to samo, co przyjęta odpowiedź

apaul

Answer 32

tak, ale tutaj wyjaśnię działanie górnego i lewego marginesu ... ktoś tego nie wie ....

user3423956

Answer 33

1

Wtedy jest to faktycznie to samo, co druga odpowiedź

apaul

Umieszczanie elementu <div> na środku ekranu

Odpowiedzi: