本文首发在个人博客yoowin.me

line-height的值和height一致

只对文本有效（块级元素无效），文本会默认在自己行高内垂直居中。

范例如下图：

文本垂直居中

代码

<style>
.first{
background-color: pink;
height：60px;
line-height:60px;
}
</style>
<div class="first">
<p>文本垂直居中</p>
</div>

绝对定位垂直居中

有固定宽度和高度,position:absolute，父元素设为相对定位，left和top偏移50%，负margin自身宽度和高度的一半，为具体数值

固定宽度和高度

代码

<div class="ct">
   <div class="box"></div>
</div>
<style>
 .ct{
   width: 300px;
   height: 300px;
   background-color: pink;
   position:relative;
   }
 .ct .box{
   width: 100px;
   height: 100px;
   display: inline-block;
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-50px;
   margin-top:-50px;
   background-color: #ccc;
   }
</style>

有固定宽度和高度的块元素，设置top:0; bottom:0; left:0; right:0; margin:auto;

top:0; bottom:0; left:0; right:0; margin:auto;

代码

<div class="ct">
   <div class="box"> </div>
</div>
<style>
  .ct{
    width: 300px;
    height: 300px;
    background-color: pink;
    position:relative;
  }
  .ct .box{
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100px;
    height: 100px;
    margin:auto;
    background-color: #ccc;
    }
  </style>

没有固定宽度和高度,position:absolute，父元素设为相对定位，left和top偏移50%，负margin自身宽度和高度的50%(不兼容ie8)

没有固定宽度和高度

代码

 <div class="ct">
    <div class="box">
     未必会来，未必会走。早应该懂得，这世界没什么不朽。时间是条狗，拼命啃噬它的肉骨头。再多挑逗，也不会回头。未必会来，未必会走。命运是量身定做，也难免出错。应该想通，谁最后不是两手空空。
    </div>
 </div>
 <style>
  .ct{
    width: 300px;
    height: 300px;
    background-color: pink;
    position:relative;
  }
  .ct .box{
    width: 50%;
    display: inline-block;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background-color: #ccc;
    }
  </style>

display：table-cell垂直居中(兼容ie8)

把元素的显示方式设置为表格table-cell，我们可以使用表格的 vertical-align属性middle来设置垂直居中(如果子元素不是img元素，可以把子元素设置为display：inline-block就可以水平居中)

table-cell

代码

<div class="ct">
  <img src="http://p4.music.126.net/Tfiad_1N1ko6iI-q1D_ZiA==/737772302281979.jpg?param=130y130" alt="">
</div>
<style>
.ct{
  width: 300px;
  height: 300px;
  background-color: pink;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  }
</style>

vertical-align:midlle垂直居中

vertical-align实现居中的元素必须是行内元素或者行内块元素，此方法是给元素添加一个行内块元素的伪类，高度设为父元素的宽度，和元素一起设为vertical-align为middle

vertical-align

代码

<div class="ct">
   <img src="http://p4.music.126.net/Tfiad_1N1ko6iI-q1D_ZiA==/737772302281979.jpg?param=130y130" alt="">
</div>
<style>
  .ct{
    width: 300px;
    height: 300px;
    background-color: pink;
    text-align: center;
    }
  .ct:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    }
  img{
    width: 100px;
    vertical-align: middle;
    }
</style>

flex垂直居中

不兼容ie8的一种方法，但却是最简便的方法，也是日后越来越普遍的一种解决方案

flex水平垂直居中

代码

<style>
  .ct{
    width: 300px;
    height: 300px;
    background-color: pink;
    display: flex;
    align-items: center;    /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    }
  .box{
    width: 100px;
    height: 100px;
    background-color: #555;
    }
</style>
<body>
  <div class="ct">
    <div class="box"></div>
  </div>
</body>

yoowinsu / blog

垂直居中的几种方法 #48