Вам нужно добавить атрибут line-height, и этот атрибут должен соответствовать высоте div. В вашем случае:

height: 309px;
line-height: 309px;

Фактически, вы могли бы вообще удалить атрибут height.

Это работает только для одной строки текста, поэтому будьте осторожны.

Обновление - здесь отличный ресурс

http://howtocenterincss.com/

Центрирование в CSS - это боль в заднице. Кажется, что существует множество способов сделать это, в зависимости от множества факторов. Это объединяет их и дает вам код, необходимый для каждой ситуации.

Обновление - с помощью Flexbox

Inline, сохраняя этот пост в актуальном состоянии с помощью новейших технологий, здесь намного проще сконцентрироваться на использовании flexbox. Flexbox не поддерживается в IE9 and lower.

Вот несколько отличных ресурсов:

• Руководство по Flexbox
• Центрирование элементов с помощью Flexbox
• Синтаксис IE10 для Flexbox
• Поддержка Flexbox

jsfiddle с префиксами браузера

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

Обновление - другое решение

Это от zerosixthree и позволяет вам центрировать все с 6 строками css

Этот метод не поддерживается в IE8 and lower

jsfiddle

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Предыдущий ответ

Простой и кросс-браузерный подход, полезный как ссылки в отмеченном ответе, немного устарел.

Как вертикально и горизонтально центрировать текст как в неупорядоченном списке, так и в div без использования высот строк JavaScript или css. Независимо от того, сколько текста у вас есть, вам не придется применять какие-либо специальные классы к конкретным спискам или divs (код для каждого из них одинаковый). Это работает во всех основных браузерах, включая IE9, IE8, IE7, IE6, Firefox, Chrome, Opera и Safari. Есть 2 специальных таблицы стилей (1 для IE7 и еще один для IE6), чтобы помочь им в связи с их ограничениями css, которых нет в современных браузерах.

Энди Ховард - Как вертикально и горизонтально центрировать текст в неупорядоченном списке или div

Edit: Поскольку я не очень заботился о IE7/6 для последнего проекта, над которым я работал, я использовал слегка урезанную версию (т.е. Удалил материал, который запустил его в IE7 и 6). Может быть полезно для кого-то еще...

jsfiddle

HTML

<ul>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
</ul>

И CSS:

.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height: 100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ddd;
    width: 100px;
    height: 100px;
}

Я легко использую следующие для вертикальных центров случайных элементов:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Это центрирует текст в моей div до точной вертикальной середины внешней границы размером 200px div. Обратите внимание, что вам может понадобиться использовать префикс браузера (например, -webkit- в моем случае), чтобы сделать эту работу для вашего браузера.

Это работает не только для текста, но и для других элементов.

Это легко с display: flex. Весь текст div имеет вертикальную ориентацию:

div {
    display: flex;
    align-items: center;
}

И если вы хотите, горизонтальный:

div{
  display: flex;
  align-items: center;
  justify-content: center;
}

Вы должны увидеть нужную версию браузера; в старых версиях он не работает.

Вы можете сделать это, установив отображение в "table-cell" и применяя вертикальное выравнивание: среднее;

    {
        display:table-cell;
        vertical-align:middle;
    }

Однако это не поддерживается всеми версиями Internet Explorer в соответствии с этим отрывом, который я скопировал из http://www.w3schools.com/cssref/pr_class_display.asp без разрешения.

Примечание: Значения "встроенная таблица", "таблица", "таблица-подпись", "таблица-ячейка", "стол-столбец", "таблица-столбец-группа", "table-row", "table-row-group" и "inherit" не поддерживаются IE7 и ранее. Для IE8 требуется! DOCTYPE. IE9 поддерживает значения.

В следующей таблице показаны допустимые отображаемые значения также из http://www.w3schools.com/cssref/pr_class_display.asp. Я надеюсь, что это поможет

Это мое любимое решение для этой проблемы (простой и очень удобный браузер):

div{
    margin:5px;
    text-align:center;
    display:inline-block;
}

.vcenter{
    background:#eee;
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
    
.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>
<div class="vcenter">
  <p>This is my Text<br />Text</p>
</div>
<div class="vcenter">
  <p>This is my Text<br />Text<br />Text</p>
</div>


   
   

Вот решение, которое лучше всего подходит для одной строки текста.

Он также может работать для многострочного текста с некоторой настройкой, если известно количество строк

.testimonialText{
    font-size:1em;/*Set a font size*/
}
.testimonialText:before {/*add a pseudo element*/
    content:"";
    display:block;
    height:50%;
    margin-top:-0.5em;/*half of the font size*/
}

Вот JSFiddle

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:250px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>
</html>

Проверьте это простое решение:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 {
   display:table-cell;
   vertical-align:middle;
   height:inherit
}

JSFiddle

Вы можете выровнять центральный текст по вертикали внутри div с помощью flexbox.

<div>
   <p class="testimonialText"> This is the testimonial text. </p>
</div>

div {
   display: flex;
   align-items: center;
}

Вы можете узнать больше об этом по этой ссылке: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Это самое чистое решение, которое я нашел (IE9 +), и добавляет исправление для проблемы "off by.5 pixel", используя transform-style, что другие ответы были опущены.

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);    
}

Источник: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Существует более простой способ вертикального выравнивания содержимого без использования таблицы/таблицы:

http://jsfiddle.net/bBW5w/1/

В нем я добавил невидимый (width = 0) div, который принимает всю высоту контейнера.

Кажется, что он работает в IE и FF (последние версии), не проверял с другими браузерами

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

И, конечно же, CSS:

.t, .t > div:first-child
{ 
    border:1px solid green;
}
.t
{
    height:400px;
}
.t > div 
{ 
    display:inline-block; 
    vertical-align:middle  
}
.t > div:last-child
{
    height:100%;    
}

Простое решение элемента неизвестных значений

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

В соответствии с ответом Адама Томата был подготовлен jsfiddle example, чтобы выровнять текст в div

<div class="cells-block">    
    text<br/>in the block   
</div>

с помощью отображения: flex в CSS

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* vertically   */
    justify-content: flex-end; /* horisontally */
    text-align: right;         /* addition: for text lines */
}

с другим example и немного объяснений в blog.

Использование flex должно быть осторожным с различиями в рендеринге браузеров.

Это хорошо работает как для Chrome, так и для IE:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Сравните с тем, который работает только с Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style="    margin: auto;">Active Tasks</span></div>
</div>

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative{
    position:relative;
 }
 .absolute{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);
 }
 .table{
    display:table;
    height:100%;
    width:100%;
    text-align:center;
    color:#fff;
 }
 .table-cell{
    display:table-cell;
    vertical-align:middle;
 }

Это еще одна вариация div в шаблоне div с использованием calc() в CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Это работает, потому что:

• position:absolute для точного размещения div в пределах div
• знать высоту внутреннего div, потому что мы устанавливаем его на 20px.
• calc(50% - 10px) для 50% - половина высоты для центрирования внутреннего div

Хм, очевидно, есть много способов решить эту проблему.

Но у меня есть <div>, который позиционируется абсолютно, height:100% (фактически, top:0;bottom:0 и фиксированная ширина) и display:table-cell просто не работал, чтобы центрировать текст по вертикали. Мое решение действительно требовало внутреннего элемента span, но я вижу, что многие из других решений тоже, поэтому я мог бы также добавить его:

Мой контейнер - .label, и я хочу, чтобы в нем было вертикально центрировано. Я сделал это, установив абсолютно в top:50% и установив line-height:0

<div class="label"><span>1.</span></div>

И CSS выглядит следующим образом:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Смотрите в действии: http://jsfiddle.net/jcward/7gMLx/

Попробуйте вставить элемент таблицы.

<div>
    <table style='width:200px; height:100px;'>
        <td style='vertical-align:middle;'>
            copenhagen
        </td>
    </table>
</div>

несколько трюков для отображения содержимого/изображения в центре Div. Некоторые ответы действительно приятные, и я полностью согласен с ними.

Абсолютное горизонтальное и вертикальное центрирование в CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Существует более чем 10 методов с примерами. Теперь это зависит от вас, который вы предпочитаете.

Несомненно, display:table; display:table-Cell - лучший трюк.

Некоторые хорошие трюки следующие:

Трюк 1 - Используя display:table; display:table-Cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT 
    </div>
  </div>
</div>

Код CSS

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Трюк 2 - Используя display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT 
  </div>
</div>

CSS-код

.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

Трюк 3 - Используя position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER,<br>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS

.vertical {
   display: table-caption;
}

Добавьте этот класс к элементу, который содержит элементы, которые вы хотите выровнять по вертикали

Если вам нужно использовать свойство min-height, вы должны добавить этот CSS:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}