如何在 div 容器中垂直居中一个 h1 标题？

Question

如何在 div 容器中垂直居中一个 h1 标题？

4

如标题所述，我只需要在一个div中垂直居中一个h1标题。

以下是非常简单的代码：

<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>

.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
}

h1{
vertical-align:middle;
}

这是一个演示

使用 display table 后，文本在垂直方向上很好地居中了，谢谢大家。现在我面临一个新问题；（请查看这里的 jsffidle）我想让“文本 1”和“文本 2”并排显示，在每个红色 div 中间的每个小蓝色 div 下面放置两个红色 div.. 求助！

- Sushi

这绝对是一个重复的。 - Ionut Necula

嗨，@JustusRomijn，我这里得到了很棒的答案（Flex）。 - Sushi

@Sushi 是的，但我可以将另一个问题标记为重复。SO上已经有很多关于垂直居中的问题了。快速谷歌一下给我：https://dev59.com/2WIk5IYBdhLWcg3wPL7R，https://dev59.com/aWox5IYBdhLWcg3w9o6h，https://dev59.com/QGgu5IYBdhLWcg3w8Lav - Justus Romijn

你好 @JustusRomijn，我刚刚在我的问题中添加了一个更新，请看一下。我真的在努力让它工作，但它不起作用。 - Sushi

@Sushi，请再创建一个新的问题。这个问题已经与你最初的问题无关了。我们只是在尽可能地保持SO的组织性。 - Justus Romijn

谢谢 Justus，你是正确的。 - Sushi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danield · Accepted Answer

解决方案 #1

将 display: table; 添加到容器中，并将 display: table-cell; 添加到 h1 元素中。

.container{
    width:500px;
    height:180px;
    background-color:red;
    text-align:center;
    display:table; /* <---- */
}

h1{
    vertical-align:middle;
    display:table-cell; /* <--- */
}

FIDDLE

.container {
  width: 500px;
  height: 180px;
  background-color: red;
  text-align: center;
  display: table;
}
h1 {
  vertical-align: middle;
  display: table-cell;
}

<div class="container">
  <h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>

Solution #2 : Flexbox

.container{
    width:500px;
    height:180px;
    background-color:red;
    text-align:center;
    display: flex;
    align-items: center; /* align vertical */
}

FIDDLE

.container {
  width: 500px;
  height: 180px;
  background-color: red;
  text-align: center;
  display: flex;
  align-items: center;
  /* align vertical */
}

<div class="container">
  <h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>

Solution #3 - Transforms

h1
{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

FIDDLE

.container {
  width: 500px;
  height: 180px;
  background-color: red;
  text-align: center;
}
h1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="container">
  <h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>

解决方案#4：添加一个高度为100%的伪元素

.container:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px; /* to counter inline-block whitespace */
}
h1 {
    display: inline-block;
    vertical-align: middle;
}

FIDDLE

.container {
  width: 500px;
  height: 180px;
  background-color: red;
  text-align: center;
}
.container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
  /* to counter inline-block whitespace */
}
h1 {
  display: inline-block;
  vertical-align: middle;
}

<div class="container">
  <h1> title in multiple lines, so i can't use line-height, i must use something else </h1>

</div>