Обновление - вот отличный ресурс
http://howtocenterincss.com/
Центрирование в CSS - это боль в заднице. Кажется, существует множество способов сделать это, в зависимости от множества факторов. Это объединяет их и дает вам код, необходимый для каждой ситуации.
Обновление - Использование Flexbox
В соответствии с последним обновлением этой статьи, существует гораздо более простой способ центрирования чего-либо с помощью flexbox. Flexbox не поддерживается в IE9 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
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 . Независимо от того, сколько у вас текста, вам не нужно применять какие-либо специальные классы к определенным спискам или элементам div (код одинаков для каждого). Это работает во всех основных браузерах, включая IE9, IE8, IE7, IE6, Firefox, Chrome, Opera и Safari. Есть две специальные таблицы стилей (одна для 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;
}