Розміщення елемента <div> в центрі екрана

134

Я хочу розмістити <div>(або а <table>) елемент в центрі екрана, незалежно від розміру екрана. Іншими словами, пробіл, розташований вгорі та внизу, повинен бути рівним, а ліворуч - на правій та лівій сторонах. Я хотів би досягти цього лише за допомогою CSS.

Я спробував таке, але це не працює:

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

Примітка.
Це так чи інакше, якщо <div>елемент (або <table>) прокручується веб-сайтом чи ні. Просто хочу, щоб його було по центру, коли сторінка завантажується.

javascript css html

— саміт
джерело

1

можливий дублікат Як вирівняти <div> до середини сторінки

— Purag

Привіт Пурму, питання, яке ви згадали, якщо для позиціонування в середині сторінки, тобто лівий і правий бік рівний простір - не верхній і нижній простір!

— заява

1

можливий дублікат того, що є найкращим способом

— центрувати

можливий дублікат Як централізувати діву в діві - горизонтально?

— bjb568

201

Простий спосіб, якщо у вас фіксована ширина і висота:

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

Будь ласка, не використовуйте вбудовані стилі! Ось робочий приклад http://jsfiddle.net/S5bKq/ .

— ейнштейн
джерело

13

Для тих , хто шукає висоту динамічну: stackoverflow.com/questions/396145 / ...

— pulkitsinghal

1

@ woho87 чому б не використовувати вбудовані стилі? з загальновідомих причин або є щось більше, що я повинен знати для конкретного прикладу?

— Шаркі

@KatrinRaimond це з відомих причин, задокументовані тут stackoverflow.com/questions/2612483/… і тут webdesign.about.com/od/css/a/aa073106.htm .

— Олексій

Але, встановивши верхню частину divElement в одиниці "%", DivElement займає вертикальний простір, якщо divElement не розміщений у відносному елементі.

— sudip

це позиція: фіксована або позиція: абсолютна?

— Куркула

151

Оскільки трансформації підтримуються більш повсюдно в ці дні, ви можете це зробити, не знаючи ширини / висоти спливаючого вікна

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

Легко! JSFiddle тут: http://jsfiddle.net/LgSZV/

Оновлення: Ознайомтесь з https://css-tricks.com/centering-css-complete-guide/, щоб отримати досить вичерпний посібник з CSS-центрування. Додавши його до цієї відповіді, оскільки, здається, вийшло багато очних яблук.

— XwipeoutX
джерело

1

Якщо використовується вміст у спливаючому overflow:autoвікні, в IE9 прокручується прокрутка. :(

— joescii

2

Не такі повсюдні. IE8 зберігає 20% частки браузера і не підтримує його . Тож візьміть цей лише для IE9 +.

— fotanus

7

+1 - це єдине рішення, де не потрібно вказувати висоту та ширину або використовувати Javascript.

— Ян Дерк

@fotanus, коли розробники перестануть підтримувати IE 9 <, користувачі перейдуть або оновлять браузер.

— Дієго Віейра

@DIegoVieira, на жаль, це не так, як все працює. Дивіться трагедію спільноти . Тож люди продовжуватимуть підтримувати IE8, оскільки не хочуть втрачати цю частку, а люди продовжуватимуть використовувати, оскільки це працює.

— fotanus

33

Встановіть ширину і висоту, і ви добре.

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

Якщо ви хочете, щоб розміри елементів були гнучкими (і не хвилювались застарілі браузери), перейдіть до відповіді XwipeoutX .

— Ерік Егнер
джерело

1

Це найчистіша і найпростіша відповідь, і це також мобільно . +1

— Іржа

22

Він буде працювати для будь-якого об’єкта. Навіть якщо ви не знаєте розміру:

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

— світильники
джерело

17

Тепер простіше з HTML 5 та 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>

— Даніель Де Леон
джерело

12

Якщо у вас фіксоване divпросто абсолютне положення, воно знаходиться на рівні 50% від верхнього та 50% зліва та від’ємного поля вгорі та зліва від половини висоти та ширини відповідно. Підлаштовуйте свої потреби:

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

— еклани
джерело

9

Використовуйте flex . Набагато простіше і буде працювати незалежно від вашого divрозміру:

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

Розгорніть фрагмент

— Caner
джерело

3

Я б це зробив у CSS:

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

потім у HTML:

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

— Едуардо Лаго Агілар
джерело

0

спробуйте це

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

Або це

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

— Далі
джерело

0

Якщо хтось шукає рішення,

Я знайшов це,

Це найкраще рішення, яке я знайшов поки!

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

Сподіваюся, вам сподобається!

— Крістофер Етвуд
джерело

0

Ще один простий гнучкий підхід до відображення блоку в центрі: використання вирівнювання нативного тексту з line-heightта text-align.

Рішення:

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

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

І зразок html:

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

Ми робимо div.parentповноекранний екран, і його одинока дитина div.childвирівнюється як текст display: inline-block.

Переваги:

гнучкість, відсутність абсолютних значень
підтримка розміру
прекрасно працює на мобільному пристрої

Простий приклад на JSFiddle: https://jsfiddle.net/k9u6ma8g

— Павло Шорохов
джерело

0

Альтернативне рішення, яке не використовує абсолютну позицію:
я бачу багато абсолютних відповідей на позицію. Я не міг використовувати позицію абсолютну, не порушуючи щось інше. Тож для тих, хто також не міг, ось що я зробив:
https://stackoverflow.com/a/58622840/6546317 (розміщено у відповідь на інше запитання).

Рішення орієнтоване лише на вертикальне центрування, оскільки елементи моїх дітей уже були горизонтально центрировані, але те саме можна застосувати, якщо ви не могли горизонтально їх зосереджувати іншим способом.

— редторика
джерело

-2

спробуйте це:

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

— користувач3423956
джерело

2

Це фактично те саме, що і прийнята відповідь

— apaul

так, але тут я пояснюю роботу верхньої межі поля та зліва ... хтось цього не знає ....

— user3423956

1

Тоді це фактично те саме, що і друга відповідь

— апаул