Каков наименее ужасный способ центрировать элемент с помощью CSS?

У меня есть html, который выглядит так:

<!DOCTYPE html> 
<head>
    <meta charset="utf-8">

    <!--[if lte IE 8]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head> 

<body>

<header>
  <h1>Some title thing, who knows</h1>
  <nav>
    <ul>
      <li><a href="one/">One</a></li>
      <li><a href="two/">Two</a></li>
      <li><a href="three/">Three</a></li>
    </ul>
  </nav>
</header>

</body>
</html>

Если я даю header автоматическое поле и ширину, он будет располагаться по горизонтали. Какой наименее ужасный способ обеспечить его вертикальное центрирование?

Я знаю следующие статьи, которые дают некоторое обсуждение темы:

Ответы

Ответ 1

Поскольку этот вопрос был помечен CSS3, здесь "наименее ужасное" решение с использованием CSS3 "flexbox". К сожалению, только последние версии Safari, Chrome и Firefox поддерживают его.

html, body {
  margin:0;
  padding:0;
  height:100%;
  background:#eee;
}
header {
  width:30em;
  background:#fff;
}
body {  
  display:box;
  box-pack:center;
  box-align:center;
  box-orient:horizontal;
}

Более полное демо можно найти здесь.

Ответ 2

Если вы НЕ знаете высоту header, единственный способ, которым я часто пользуюсь, требует дополнительного html, если все сделано правильно, вы можете обойтись без него.

Вы делаете заголовок vertical-align: middle, делая его table-cell

html{
    height: 100%;
}      
body {
    display: table;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}
header {
    display: table-cell;
    vertical-align: middle;
}

Заметьте, что я установил высоту 100% на html node, который действительно не является правильным css, насколько я знаю, он должен быть на теле, а заголовок должен быть в инкапсулирующем div, у которого display: table http://jsfiddle.net/bgYPR/2/

Ответ 3

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

Ответ 4

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

Ответ 5

Обычно, когда мне нужно вертикальное центрирование, я использую пару элементов встроенного блока. У вас есть один элемент, который является полной высотой контейнера, и второй элемент, который является только высотой содержимого, которое будет центрировано. Оба параметра display:inline-block;vertical-align:middle.

Мне нравится использовать для этого теги b, потому что они не имеют смыслового значения и крошечные:

<style>
    .mycontainer {text-align:center;}
    b.vcenter {display:inline-block;height:100%;width:1px;vertical-align:middle;}
    b.vcenter+b {display:inline-block;vertical-align:middle;}
</style>

<div class="mycontainer">
    <b class="vcenter"></b><b>This is my centered content<br>It makes me happy!</b>
</div>

Помните, этот конкретный пример кода не работает в IE7 из-за отсутствия селекторов inline-block и sibling (+), но тот же метод может быть выполнен с использованием более сложного кода, который будет обрабатывать IE7.

Ответ 6

Я обычно не был бы вертикально центрирован, но указывал бы малый верхний край, такой как 20px. Мы не всегда достаточно знаем о оборудовании конечного пользователя, чтобы сделать предположение о том, что удобно или можно использовать для платформы, на которой они просматривают сайт.