Расположение элемента <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

— Sumit
источник

1

возможный дубликат Как выровнять <div> по середине страницы

— Purag

Привет, Purmou, вопрос, который вы упомянули, если для позиционирования в середине страницы, то есть равное пространство слева и справа, а не равное пространство сверху и снизу!

— sumit

1

возможный дубликат « Какого наилучшего способа центрирования вертикального

— разделения

возможный дубликат Как центрировать div в div - по горизонтали?

— bjb568

201

Простой способ, если у вас фиксированная ширина и высота:

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

Пожалуйста, не используйте встроенные стили! Вот рабочий пример http://jsfiddle.net/S5bKq/ .

— Einstein
источник

13

Для тех, кто ищет динамическую высоту: stackoverflow.com/questions/396145/…

— pulkitsinghal

1

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

— Sharky

@KatrinRaimond это по хорошо известным причинам, описанным здесь stackoverflow.com/questions/2612483/… и здесь webdesign.about.com/od/css/a/aa073106.htm .

— Alex

Но установка верхней части 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

— Rust

22

Подойдет для любого объекта. Даже если вы не знаете размер:

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

— luminousmen
источник

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

— elclanrs
источник

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>

Развернуть фрагмент

— Джанер
источник

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 (опубликовано в ответ на другой вопрос).

Решение фокусируется только на вертикальном центрировании, потому что мои дочерние элементы уже были центрированы по горизонтали, но то же самое можно было бы применить, если бы вы не могли центрировать их по горизонтали другим способом.

— reddtoric
источник

-2

попробуй это:

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

— user3423956
источник

2

— Фактически

да, но здесь я объясняю работу полей сверху и слева ... кто-то не знает этого ....

— user3423956 09

1

Тогда это фактически то же самое, что и второй ответ

— апаул