CSS полного экрана DIV с текстом в середине

У меня есть класс CSS, определенный таким образом я могу сделать DIV, чтобы использовать все окна просмотра браузера, правило заключается в следующем:CSS полного экрана DIV с текстом в середине

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

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

Необходимо работать только с веб-браузерами на основе веб-страниц.

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

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

источник

2012-05-22 Juan Alberto López Cavallotti

'' 'text-align: center; позиция: абсолютная; верх: 50%; дно: 50%; width: 100%; '' '- Это должно работать лучше, чем принятый ответ. Добавьте стили в свой бит текста. – James111

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

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

DEMO

источник

2012-05-22 17:53:11 paislee

Я пытаюсь с этим, но если бы я хотел центрировать текст в середине« центра » «div тоже? –

@ JuanAlbertoLópezCavallotti Вы просто будете воспроизводить проблему. Добавление 'text-align: center' в класс' center' обеспечит вас на полпути. Если это всего лишь 1 строка текста, вы можете добавить 'line-height: 50px', или независимо от высоты центрированного контейнера. Это будет также вертикально центрировать его. – paislee

Не уверен, что нужен дополнительный элемент, но здесь вы: http://jsfiddle.net/wzSmc/1/ – FelipeAls

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

источник

2012-05-22 17:51:53 Ryan

В этой классической проблеме нет чистого решения CSS.

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

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

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

источник

2012-05-22 17:54:16

Общепринятые ответ работает, но если:

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

использовать это:

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

Дополнительная информация о центрировании контента в этом отличном CSS-Tricks article.

Кроме того, если вам не нужно поддерживать старые браузеры: а прогибается коробка делает этот кусок пирога:

.center{ 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

Другой большой справочник по flexboxs из CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/

источник

2014-12-23 04:41:03 agconti

CSS полного экрана DIV с текстом в середине

ответ

Смежные вопросы