1368

Я хочу центрировать по divвертикали с помощью CSS. Я не хочу таблиц или JavaScript, а только чистый CSS. Я нашел несколько решений, но во всех них отсутствует поддержка Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

Как я могу центрировать по divвертикали во всех основных браузерах, включая Internet Explorer 6?

— Бурак Эрдем
источник

25

@MarcoDemaio Разве люди постоянно не одобряют tablesздесь макеты?

— Chud37

14

@ Chud37: это зависит от того, что вы должны сделать, таблицы для разметки, как правило, не универсальны и длинны для ввода кода, с помощью CSS вы можете легко изменить разметку в 2 столбца в разметку 3/4/5 sols и т. Д. Но в этом случае отличается тем, что использует десятки советов и хитростей CSS для такой простой задачи, которую можно решить с помощью идеального кросс-браузерного стола, это все равно что пытаться войти в свой дом через окно вместо использования двери.

— Марко Демайо

В случае, если люди не заботятся о поддержке старых браузеров: davidwalsh.name/css-vertical-center

— Karolis Šarapnickis

1

css-vertical-center.com есть некоторые решения с информацией о совместимости браузера

— EscapeNetscape

2

Вот много способов сделать это css-tricks.com/centering-css-complete-guide

— Майкл Юрин

1375

Ниже приведено лучшее универсальное решение, которое я мог бы построить для центрирования по вертикали и горизонтали в центре содержимого с фиксированной шириной и гибкой высотой . Он был протестирован и работает для последних версий Firefox, Opera, Chrome и 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>

Как вертикально центрировать div для всех браузеров?

Решение Flexbox

Центрирование только по вертикали

Внешний контейнер:

Внутренний контейнер:

Контент окно:

Демо-версия:

Центрирование по горизонтали и вертикали

Внутренний контейнер:

Контент окно:

Демо-версия:

CSS Grid

CSS

HTML