Позиционирование элемента <div> в центре экрана

Я хочу разместить элемент <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>) прокручивается с веб-сайта или нет. Просто хотите, чтобы он был центрирован при загрузке страницы.

Ответ 1

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

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

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

Ответ 2

С преобразованием, которое в наши дни поддерживается повсеместно, вы можете сделать это, не зная ширины/высоты всплывающего окна

.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. Добавляя его к этому ответу, поскольку он, кажется, получает много глазных яблок.

Ответ 3

Установите ширину и высоту, и вы хорошо.

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

Если вы хотите, чтобы размеры элементов были гибкими (и не заботятся о старых браузерах), перейдите с ответом XwipeoutX.

Ответ 4

Теперь проще с 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>

Ответ 5

Если у вас фиксированная абсолютная позиция div равна 50% от верхнего и 50% левого и отрицательного полей вверху и слева от половины высоты и ширины соответственно. Отрегулируйте ваши потребности:

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

Ответ 6

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

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

Ответ 7

Если кто-то ищет решение,

Я нашел это,

Это лучшее решение, которое я нашел еще!

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

Надеюсь, вам понравится!

Ответ 8

Еще один простой гибкий подход к отображению блока в центре: с использованием встроенного выравнивания текста с 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.

Преимущества:

flexebility, нет абсолютных значений
поддержка изменения размера
отлично работает на мобильных устройствах

Простой пример в JSFiddle: https://jsfiddle.net/k9u6ma8g

Ответ 9

Я бы сделал это в CSS:

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

затем в формате HTML:

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

Ответ 10

попробуйте следующее:

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

Ответ 11

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

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