Вертикально и горизонтально текст центра Ответственно

Question

Я пытаюсь создать сайт с использованием параллакса jquery pluin, и я бы хотел, чтобы первый «слайд» был заголовком, который находится прямо в центре экрана.

Я изо всех сил пытаюсь это сделать - выравнивание по горизонтали очень просто, но я не могу вертикально выровнять его.

Есть ли способ сделать это, который работает, а также реагирует? Я включил скрипку, чтобы показать вам базовую структуру - http://jsfiddle.net/SohamK/yKDWS/1/. Я также воспроизвели HTML из ниже скрипкой:

<div class="container"> 
<div class="title"> 
    <h1> My Title </h1> 
</div> 

Любая помощь будет высоко ценится!

Спасибо!

Answer 1

Вы можете использовать display свойство как это:

.container { 
    width:100%; 
    height:100%; 
    display:table; 
    text-align:center; 
} 
.title { 
    display:table-cell; 
    vertical-align:middle; 
} 

Демонстрационная http://jsfiddle.net/yKDWS/13/

Answer 2

В основном это было всегда выравнивать его вертикальной средней

.title 
    { 
     margin-top:25%; 
    } 

demo here

Что точная разметка для вас страницы, это зависит от того, что.

Если вышеуказанная демонстрация разрешает это, то потребуется штраф, еще разметка! :)

Answer 3

$(function() { 
$('h1').css({ 
    'position' : 'absolute', 
    'left' : '50%', 
    'top' : '50%', 
    'margin-left' : -$(this).width()/2, 
    'margin-top' : -$(this).height()/2 
    }); 
}); 

Попробуйте это с JQuery

Answer 4

Вы можете использовать свойство CSS display:table, и использование vertical-align:middle & text-align:center. Это идеально по центру вашего текста по вертикали и горизонтали в вашем div.

Ваш ДИВ .container будет иметь display:table, и ваш DIV .title будет иметь display:table-cell со свойством vertical-align:middle.

Проверьте Can I Use для отображения: совместимость с таблицей браузера.

Полный CSS будет выглядеть следующим образом -

.container { 
    display:table; 
} 
.title { 
    text-align:center; 
    display:table-cell; 
    vertical-align:middle; 
} 

Answer 5

Попробуйте это: Demo here

CSS

.container { 
    width:500px; 
    height:300px; 
    background:#333; 
    display: table; 
} 

.title { 
    color:#fff; 
    padding:0; 
    display: table-cell; 
    vertical-align: middle; 
    text-align:center; 
}