如何垂直居中一个div容器中的h1？ [英] How to center vertically a h1 in middle of a div container?

问题描述

这是一个非常简单的代码：

 < div class =container> 
< h1>标题在多行中，所以我不能使用行高，我必须使用别的东西< / h1> 
  

  .container {
 width：500px; 
 height：180px; 
背景颜色：红色; 
 text-align：center; 
} 
 
 h1 {
 vertical-align：middle; 
} 
  

这是请点击
我想要的是文本1和text 2将并排显示，并且每个小蓝div都会在每个红div中间的两个红div之下..有什么帮助吗？

解决方案

解决方案＃1

将 display：table; code> 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;背景颜色：红色; text-align：center; display：table;} h1 {vertical-align：middle; display：table-cell;}  

< div class = 容器 > < H1> title in multiple lines，so I can not use line-height，i must use something< / h1>< / div>





  .container {$> 
 $ b 
 b $ b width：500px; 
 height：180px; 
背景颜色：红色; 
 text-align：center; 
 display：flex; 
 align-items：center; / * align vertical * / 
} 
  





FIDDLE

.container {宽度：500px; height：180px;背景颜色：红色; text-align：center;显示：flex; align-items：center; / * align vertical * /}

< div class = 容器 > < H1> title in multiple lines，so I can not use line-height，i must use something< / h1>< / div>

$ b $ h $>解决方案＃3 - 转换
$ b $

  h1 
 {
位置：相对; 
 top：50％; 
 transform：translateY（-50％）; 
} 
  





FIDDLE

.container {width：500px; height：180px;背景颜色：红色; text-align：center;} h1 {position：relative;顶部：50％; transform：translateY（-50％）;}

< div class =container> < H1> title in multiple lines，so I can not use line-height，i must use something< / h1>< / div>

$ b

解决方案＃4添加一个100％高度的伪元素

  .container：之前{
 content：''; 
 display：inline-block; 
身高：100％; 
 vertical-align：middle; 
 margin-right：-4px; / *来计算内联块空白* / 
} 
 h1 {
 display：inline-block; 
 vertical-align：middle; 
} 
  

FIDDLE

.container {width：500px; height：180px;背景颜色：红色; text-align：center;}。container：before {content：'';显示：inline-block;身高：100％; vertical-align：middle; margin-right：-4px; / *来计算内联块空白* /} h1 {display：inline-block; vertical-align：middle;}

< div class = 容器 > < H1> title in multiple lines，so I can not use line-height，i must use something< / h1>< / div>

as said in the title all i need is centering vertically a title h1 in the middle of a div.

this is a very simple code :

<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;
}

This is a demo here

After using display table, the text is nicely centered vertically, thank you All. Now i'm facing a new problem; (look at the jsffidle here please What i want is "text 1" and "text 2" will be displayed side by side, and every small blue div goes under the two red divs in the middle of every red div.. any help please ?

解决方案

Solution #1

Add display:table; to container and display:table-cell; to 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>

Solution #4 Add a Pseudo element with 100% height

.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>

这篇关于如何垂直居中一个div容器中的h1？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！