html – 如何在div容器的中间垂直居中h1？

概述参见英文答案 > How can I vertically center text in a dynamically height div?                                    9个 正如在标题中所说的,我需要的是在div的中间垂直居中标题h1. 这是一个非常简单的代码： <div class="container"><h1> title in multiple 参见英文答案 > How can I vertically center text in a dynamically height div?                                    9个
正如在标题中所说的,我需要的是在div的中间垂直居中标题h1.

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

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

这是@L_502_1@

使用显示表后,文本垂直居中,谢谢大家.现在我正面临一个新问题; (看看JsffIDle here please
我想要的是“文本1”和“文本2”并排显示,每个小的蓝色div都在每个红色div中间的两个红色div下面…有什么帮助吗？

解决方法 解决方案#1

添加显示：表;容器和显示器：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 >  <h1> Title in multiple lines,i must use something else </h1></div>

解决方案#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 >  <h1> Title in multiple lines,i must use something else </h1></div>

解决方案#3 – 转换

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 >  <h1> Title in multiple lines,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 >  <h1> Title in multiple lines,i must use something else </h1></div>

总结

以上是内存溢出为你收集整理的html – 如何在div容器的中间垂直居中h1？全部内容，希望文章能够帮你解决html – 如何在div容器的中间垂直居中h1？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。