div垂直居中

1：translate

<div className='threeBlock'>
        <div >transform的translate的垂直居中</div>
 </div>

.threeBlock{//transform的translate的垂直居中
    background: #fa9;
    height: 100px;
    position: relative;
    div{
        position: absolute;
        top:50%;
        left:50%;
        width:25%;
        transform:translate(-50%,-50%);
        text-align: center;
        border: 1px solid blue;
    }
}

2：绝对定位和0

<div className='fourBlock'>
        <div >绝对定位和0</div>
</div>

.fourBlock{
    background: rgb(228, 238, 194);
    height: 100px;
    position: relative;
    div{
        position: absolute;
        border: 1px solid red;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 40px;
        width: 25%;
    }
}

3：相对于全局的绝对定位法

<div className='sixBlock'>
       <div>相对于全局的绝对定位法</div>
</div>

.sixBlock{
    background: #fa9;
    height: 100px;
    div{
        position: absolute;
        border: 1px solid red;
        height: 50px;
        width: 100px;
        top: 50%;
        left: 50%;
        margin-bottom: 25px;
        margin-right: 50px;


    }
}

4:利用 box-pack , box-align属性

也可以实现图片居中，需要添加font-size:0;消除间距
(IE 不支持 box-pack 和 box-align 属性)

<div>
    <p>我是居中对齐的。</p>
</div>
div
{
width:350px;
height:100px;
border:1px solid black;
  
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

效果如图：