垂直居中

前言:网上有很多关于垂直居中的方法,我知道几种,但是遇到一个特定情况时,总是要想一想哪种可能合适,对这些方法的应用场景有点模糊。于是,今天就总结了一下较常见的几种场景,并给出其对应的垂直居中方法。

分以下几个场景:

1、单行文本垂直居中;

2、多行文本垂直居中(包含块高度已知);

3、多行文本垂直居中(包含块高未知);

4、盒子垂直居中(盒子高度已知);

5、盒子垂直居中(盒子高度未知);

1、2、3、讨论文本居中时均采用以下HTML结构(多行文本时加多文字即可)

<div id="container">
     啊啊啊啊啊
 </div>

4、5、讨论盒子剧中时均采用以下HTML结构

<div id="container">
  <div id="box"></div>
</div>

单行文本

方法:将容器的height和line-height设为相同值

#container{
  200px;
  height:30px;
  line-height:30px;
  background: #ccc;
}

image

多行文本(容器高度已知)

方法:将容器设为display:table-cell且vertical-align:middle。(vertical-align只能适用于内联元素和表单元格,当应用与表单元格时,让表单元格的内容居中显示)

#container{
  200px;
  height:100px;
  display: table-cell;
  vertical-align: middle;
  background: #ccc;
}

image

此方法也可应用于高度未知的情况)

多行文本(容器高度未知)

方法:给容器设置上下相同的padding值。(此时容器的高度由内容和padding撑开)

#container{
  200px;
  padding:20px;
  background: #ccc;
}

image

盒子垂直居中(盒子高度已知)

方法:盒子绝对定位+负margin值

#container{
 200px;
 height:200px;
 background: #ccc;
 position: relative;
}
#box{
  100px;
  height:100px;
  background: black;
  position: absolute;
  /*水平居中*/
  left:50%;
  margin-left:-50px;
  /*垂直居中*/
  top:50%;
  margin-top: -50px;
}

image

盒子垂直居中(盒子高度未知)

以下能应用于盒子高度未知场景的方法均可用于高度已知的场景)

方法一:容器设置display:table-cell和vertica-align:middle(此方法与场景2的方法一样,均是利用vertica-align:middle使表单元内容居中的特性)

#container{
 200px;
 height:200px;
 background: #ccc;
 display:table-cell;
 vertical-align: middle;
}
#box{
  100px;
  background:#aaa;
  /*水平居中*/
  margin:0 auto;
}

image

方法二:盒子绝对定位+translate(此方法与场景4方法类似,只是用translate代替负margin值,这样就不需要知道高度)

#container{
 200px;
 height:200px;
 background: #ccc;
 position: relative;
}
#box{
  100px;
  background:#aaa;
  position: absolute;
  left:50%;
  top:50%;
  /*代替margin-left和margin-top*/
  transform: translate(-50%, -50%); 
  -webkit-transform: translate(-50%, -50%); 
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

image

(此方法用到了css3的transform,所以ie9以下不支持)

方法三:flex方法

#container{
 200px;
 height:200px;
 background: #ccc;
 display: flex; 
 /*垂直居中*/
 align-items: center; 
 /*水平居中*/
 justify-content: center; 
}
#box{
  100px;
  background:#aaa; 
}

image

(此方法ie9及ie9以下不支持)

flex还可以实现各种各样的布局,可以参见以下两篇文章

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

原文地址:https://www.cnblogs.com/youhong/p/6802048.html