Как вертикально центрировать H1 в div?

Прежде всего, мои извинения. Я знаю, что здесь есть различные решения, но для жизни я не могу заставить их работать.

Для отзывчивого веб-сайта я пытаюсь центрировать h1 в div.

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

Итак, поскольку я, вероятно, интерпретирую более ранние решения, заданные неверным способом, может кто-то объяснить, что именно я должен добавить в код ниже, чтобы h1 центрировать по вертикали?

(Чтобы сделать этот вопрос актуальным как можно большему количеству людей, я уже лишил код всех своих предыдущих попыток сделать это сам.)

CSS:

html, body {
height: 100%;
margin: 0;
}

#section1 {
min-height: 90%; 
text-align:center
}

HTML:

<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div>

Ответ 1

вы можете добиться вертикального выравнивания с помощью display:table-cell:

#section1 {
    height: 90%; 
    text-align:center; 
    display:table;
    width:100%;
}

#section1 h1 {display:table-cell; vertical-align:middle}

Пример

Обновление - CSS3

Для альтернативного способа вертикального выравнивания вы можете использовать следующий css 3, который должен поддерживаться во всех последних браузерах:

#section1 {
    height: 90%; 
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

Обновлена скрипка

Ответ 2

Вы можете достичь этого с помощью свойства display:

html, body {
    height:100%;
    margin:0;
    padding:0;
}
#section1 {
    width:100%; /*full width*/
    min-height:90%;
    text-align:center;
    display:table; /*acts like a table*/
}
h1{
    margin:0;
    padding:0;
    vertical-align:middle; /*middle centred*/
    display:table-cell; /*acts like a table cell*/
}

Демо: http://jsfiddle.net/a3Kns/

Ответ 3

У меня был успех, поместив текст в теги span, а затем установив вертикальное выравнивание: среднее на этом интервале. Не знаю, как это кросс-браузер совместимо, но я тестировал его только в браузерах webkit.

Ответ 4

HTML

<div id='sample'>
<span class='vertical'>Test Message</span>
</div>

CSS

    #sample 
    {
        height:100px;
         width:100%;
        background-color:#003366;
        display:table;
        text-align: center;

    }
    .vertical 
    {
           color:white;
         display:table-cell;
        vertical-align:middle;
}

Fiddle: Демо

Ответ 5

Это метод jQuery. Похоже на избыток, но он вычисляет смещение.

<html>
<head>
<title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/dreamerslab/jquery.center/master/jquery.center.js"></script>
    <script type="text/javascript">
        $(function(){

            $('#jquery-center').center();

        });
    </script>

</head>
<body>
    <div id="jquery-center" style="position:absolute;">
       <h1>foo</h1>
    </div>
</body>
</html>

Ответ 6

Просто используйте отступы сверху и снизу, он автоматически центрирует содержимое по вертикали.