div竖向居中方式方法

参考页面：https://www.zhihu.com/question/20543196

1、flex方式

parentElement{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}

2、父元素设置table-cell，子元素设置居中

<div class="b"><img src=" " /></div>
.b{  
width:200px;height:200px;  display:table-cell;
vertical-align:middle;
text-align:center;  *display:block;/*ie6.7bug*/  
*font-size:175px;/*200*0.873*/ 
*font-family:Arial;}
img{width:50px;height:50px;vertical-align:middle;}

3、父元素设置line-height，然后子元素居中，单行line-height自动继承父元素行高，多行需要重新设置line-height为实际行高

方式一：单行文字或者图片

<div class="b"><img src=" " /></div>
.b{
    width:200px;height:200px;text-align:center;vertical-align:middle;line-height:200px;
}
img{
  width:50px;height:50px;vertical-align:middle;
}

方式二：多行文字，还是利用line-height将父元素高度撑开后，里面的元素可以按照对齐块状元素中线

<div>
  <span>我现在是多行，我可以分行居中显示；</span>
</div>

div {
  height: 250px;
  border: solid red 1px;
  line-height: 250px;
}
span {
  vertical-align: middle;
  display:inline-block;
  width:100px;
  line-height: 20px;
  background-color:#ff0000;
}

4，使用父元素与子元素关系，放置两个子元素设置line-block和vertical-align，利用行块撑开父元素，并设置为居中

方式一：设置父元素高度，一个子元素设置高度100%扩展高度，另一个在此基础上可以居中；

#box { 
  height: 300px;
  background: #ccc;
}
#content, #actor {
  display: inline-block;
  vertical-align: middle;
}
#actor {
  height: 100%;
}

方式二：设置其中一个子元素高度，撑开父元素，另一个在此基础上可以居中；

<div id="box">
        <div id="content">我是内容<br />我也是内容</div>
        <div id="actor"></div>
</div>

#box {   
  background: #ccc;
}
#content, #actor {
  display: inline-block;
  vertical-align: middle;  
}
#actor {
  height: 300px;
}

5,原理同上，但是使用伪元素实现

<div class="box">
        <div class="content">我00000是容</div>
</div>

方式一：设置父元素高度

.box { 
  text-align:center;
  background:rgba(0,0,0,.5);
  height:300px;
}
.content {
  display:inline-block;
  vertical-align:middle;
  height:60px; 
  line-height:60px; 
  color:red; 
  background:yellow;
}
.box:before{
  content:'';
  display:inline-block;
  vertical-align:middle;
  height:100%;
}

方式二：设置子元素高度

.box { 
  text-align:center;
  background:rgba(0,0,0,.5);
  
}
.content {
  display:inline-block;
  vertical-align:middle;
  height:60px; 
  line-height:60px; 
  color:red; 
  background:yellow;
}
.box:before{
  content:'';
  display:inline-block;
  vertical-align:middle;
  height:300px;
}

方式三：子元素和父元素都不设置高度

.box {
  position:fixed;
  display:block;
  top:0;
  right:0;
  bottom:0;
  left:0;
  text-align:center;
  background:rgba(0,0,0,.5);
}
.content {
  display:inline-block;
  vertical-align:middle;
  height:60px; 
  line-height:160px; 
  color:red; 
  background:yellow;
}
.box:before{
  content:'';
  display:inline-block;
  vertical-align:middle;
  height:100%;
}

6，设置50%的水平和垂直偏移，然后设置的margin-top和margin-left值是要居中元素自身宽/高的一半的负数

.wrap {
  position: relative;
}
.center {
  position: absolute;
  height: 100px;width:100px;
  top: 50%;left:50%;
  margin-top:-50px;
  margin-left:-50px;
}

7，使用位移transform:translate，将设置了50%偏移的子元素”往回”移动自身宽高的一半：

.wrap {
  position: relative;
}
.center {
  position: absolute;
  top: 50%;left:50%;
  transform: translate(-50%,-50%);
}

8，父元素设置相对或绝对定位；要居中的子元素设置绝对定位，所有偏移量为0，外边距为auto：

.wrap{
  position:relative;
  background-color:#93ab90;
  height:200px;
}
.center{
  position:absolute;
  top:0;bottom:0;left:0;right:0;
  margin:auto;
  background-color:#ff0000;
  height:80px;
  width:80px;
}