CSS полноэкранный div с текстом в середине

У меня есть класс css, поэтому я могу сделать div для использования всего окна просмотра браузера, следующее правило:

.fullscreenDiv {
    background-color: #e8e8e8;
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
}

Теперь я хочу, чтобы текст внутри div находился в точном центре экрана, поэтому вертикальное выравнивание по центру и горизонтальное выравнивание по середине, но я не могу найти подходящий способ сделать это.

Это нужно только для работы с браузерами на основе webkit.

Я уже пытался добавить элемент P внутри с display, установленным на table-cell (обычный способ центрирования текста) без везения.

Любые предложения?

Ответы

Ответ 1

Стандартный подход состоит в том, чтобы придать фиксированным размерам центрированный элемент и поместить его абсолютно:

<div class='fullscreenDiv'>
    <div class="center">Hello World</div>
</div>​

.center {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* margin is -0.5 * dimension */
    margin-top: -25px; 
}​

Ответ 2

Принятый ответ работает, но если:

  • Вы не знаете размеры контента
  • содержимое динамическое
  • Вы хотите быть будущим доказательством.

используйте это:

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Подробнее о центрировании контента в этой превосходной статье CSS-Tricks.

Кроме того, если вам не нужно поддерживать старые браузеры: гибкая коробка делает этот кусок пирога: 
.center{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Еще одно отличное руководство по flexboxs от CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ответ 3

Для этой классической задачи нет чистого CSS-решения.

Если вы хотите достичь этого, у вас есть два решения:

  • Использование таблицы (уродливый, не семантический, но единственный способ вертикального выравнивания объектов, которые не являются одной строкой текста).
  • Прослушивание window.resize и абсолютное позиционирование

EDIT: когда я говорю, что нет решения, я беру в качестве гипотезы, что вы заранее не знаете размер блока в центре. Если вы это знаете, решение paislee очень хорошо

Ответ 4

text-align: center будет центрировать его горизонтально, так как вертикально поместить его в промежуток и дать ему css margin:auto 0; (вам, вероятно, также придется присвоить свойство span display: block)