css的div垂直居中的方法，百分比div垂直居中（推荐translate）

1. 固定高宽div垂直居中



.outer{
position:
relative;
width:100%;
height:100%;
}
.inner{
position: absolute;

left: 50%;

top: 50%;

width:200px;

height:100px;

margin-left:-100px;

margin-top:-50px;
}

<div class="outer">
<div class="inner">
你好
</div>
</div>

2. 不固定高宽div垂直居中的方法 (推荐translate)
方法一 : 
 用一个“ghost”伪元素（看不见的伪元素）和 inline-block
/ vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block

<div class="outer2">
<div
class="inner2">
你好
</div>
</div>

.outer{
            width: 50%;
            height: 350px;
            display: block;
            margin: 50px auto;
            background-color: palegoldenrod;
            font-size: .6rem;
            line-height: 1rem;
            overflow: hidden;
            padding: 5px;
            vertical-align: middle;
            text-align: center;
        }
        .outer:after{
            content: " ";
            display: inline-block;
            width: 0px;
            height: 100%;
 
    vertical-align: middle;
        }
        .inner{
            width:90%;
            display: inline-block;
        }

此方法与图标+文字
垂直居中一样的逻辑 。都是对图标和文字部分进行

inline-block / vertical-align

以下包括了 在固定高度li ，图片 + 文件 +
图片 进行垂直居中的效果
1. 图片 文字 图片 采用float:left进行布局
2. 对图片进行垂直居中
左右居中：text-align:center
垂直居中：inline-block
/ vertical-align .left1:after
高度一定是100%，和固定高度一致，然后inline-block3. 对文字进行垂直居中
向左对齐：text-align：left
垂直居中：inline-block
/ vertical-align
.left2:after。文字比较多的情况要overflow：hiden，可以设置max-height
.outer2 .left2-2

.outer2{

            width: 50%;

            display: block;

            margin: 50px auto;

            background-color: white;

            font-size: .6rem;

            line-height: 1rem;

            overflow: hidden;

            padding: 2px;

            text-align: center;

            background-color: palegoldenrod;

            border-radius:5px ;

        }

        .outer2 ul {

            width:100%;

        }

        .outer2 ul li{

            width:100%;

            height: 3rem;

           border-bottom: 1px solid darkgrey;

        }

        .outer2 .left{

            float: left;

        }

        .outer2 .left1{

            width: 15%;

            text-align: center;

            height: 100%;

        }

        .left1:after{

            content: " ";

            display: inline-block;

            vertical-align: middle;

            height: 100%;

            width: 0px;

        }

        .outer2 .left2{

            width: 70%;

            text-align: left;

            height: 100%;

            overflow: hidden;

        }

        .outer2 .left2-2{

            width: 95%;

            display: inline-block;

            vertical-align: middle;

            max-height:100% ;

        }

        .left2:after{

            content: ' ';

            width: 0px;

            height:100% ;

            display: inline-block;

            vertical-align: middle;

        }

        .outer2 .left3{

            width: 15%;

            text-align: center;

           height: 100%;

        }

        .left3:after{

            content: " ";

            display: inline-block;

            vertical-align: middle;

            height: 100%;

            width: 0px;

        }

        .i-img{

            vertical-align: middle;

            display: inline-block;

            height: 28px;

            width : 28px;

            background: url(img/no-rede.png) center no-repeat;

        }

<div
class="outer2">

    <ul>

        <li>

            <div class="left left1">

                <i class="i-img"></i>

            </div>

            <div class="left left2">

                <div class="left2-2">

                    haorooms内部内容

                </div>

            </div>

            <div class="left left3">

                <i class="i-img"></i>

            </div>

        </li>

        <li>

            <div class="left left1">

                <i class="i-img"></i>

            </div>

            <div class="left left2">

                <div class="left2-2">

                    haorooms内部内容

                </div>

            </div>

            <div class="left left3">

                <i class="i-img"></i>

            </div>

        </li>

        <li>

            <div class="left left1">

                <i class="i-img"></i>

            </div>

            <div class="left left2">

                <div class="left2-2">

                    haorooms内部内容

                </div>

            </div>

            <div class="left left3">

                <i class="i-img"></i>

            </div>

        </li>

    </ul>

</div>

方法二：你也可以用table-cell
,写法如下：
效果：
图片 + 文字 + 图片 
1.
采用table  table-cell 进行布局一行
2.
采用table-cell的 vertical-align: middle; 垂直居中

.outer3{

            width: 50%;

            display: block;

            margin: 50px auto;

            background-color: white;

            font-size: .6rem;

            line-height: 1rem;

            overflow: hidden;

            padding: 2px;

            text-align: center;

            background-color: palegoldenrod;

            border-radius:5px ;

        }

        .outer3 ul {

            width:100%;

        }

        .outer3 ul li{

            width:100%;

            height: 3rem;

            border-bottom: 1px solid darkgrey;

        }

        .outer3 .table1{

            display: table;

            width:100%;

            height: 100%;

            text-align: center;

        }

        .outer3 .tablel1-cell1{

            display: table-cell;

            width:15%;

            vertical-align: middle;

        }

        .outer3 .tablel1-cell2{

            display: table-cell;

            width:70%;

            vertical-align: middle;

            text-align: left;

        }

        .outer3 .cell2-content{

            width:100%;

            max-height: 3rem;

            overflow: hidden;

        }

        .outer3 .tablel1-cell3{

            display: table-cell;

            width:15%;

            vertical-align: middle;

        }

<div class="outer3" style="">

    <ul>

        <li>

        <div class="table1">

            <div class="tablel1-cell1">

                <i class="i-img"></i>

            </div>

            <div class="tablel1-cell2">

                <div class="cell2-content">

                    haorooms内部内容

                </div>

            </div>

            <div class="tablel1-cell3">

                <i class="i-img"></i>

            </div>

        </div>

        <li>

            <div class="table1">

                <div class="tablel1-cell1">

                    <i class="i-img"></i>

                </div>

                <div class="tablel1-cell2">

                    <div class="cell2-content">

                        haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容

                    </div>

                </div>

                <div class="tablel1-cell3">

                    <i class="i-img"></i>

                </div>

            </div>

        </li>

        <li>

            <div class="table1">

                <div class="tablel1-cell1">

                    <i class="i-img"></i>

                </div>

                <div class="tablel1-cell2">

                    <div class="cell2-content">

                        haorooms内部内容

                    </div>

                </div>

                <div class="tablel1-cell3">

                    <i class="i-img"></i>

                </div>

            </div>

        </li>

    </li>

    </ul>

</div>

方法三： 推荐translate()
，更清新简单

效果：图片
文字 图片

1.
布局用float:left

2.
图片的垂直居中用inline-block和vertical-align: middle;

3.
文字布局采用 transform: translate(0px ,-50%);。注意要position
top 联合使用。

transform:
translate不光在这些小的地方 ，可以对弹出层 垂直居中

-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

.outer4{

            width: 50%;

            display: block;

            margin: 50px auto;

            background-color: white;

            font-size: .6rem;

            line-height: 1rem;

            overflow: hidden;

            padding: 2px;

            text-align: center;

            background-color: palegoldenrod;

            border-radius:5px ;

        }

        .outer4 ul {

            width:100%;

        }

        .outer4 ul li{

            width:100%;

            height: 3rem;

            border-bottom: 1px solid darkgrey;

        }

        .outer4 .left1 {

            float:left;

            width:15%;

            height: 100%;

        }

        .outer4 .left1:after{

            content: " ";

            display: inline-block;

            height: 100%;

            vertical-align: middle;

            width:0px;

        }

        .outer4 .left2 {

            float:left;

            width:70%;

            height: 100%;

        }

        .outer4 .left2-content{

            width:100%;

            height: 100%;

            position: relative;

        }

        .outer4 .left2-content2{

            position: absolute;

            top: 50%;

            transform: translate(0px ,-50%);

            max-height: 100%;

            overflow: hidden;

            text-align: left;

        }

        .outer4 .left3 {

            float:left;

            width:15%;

            height: 100%;

        }

        .outer4 .left3:after{

            content: " ";

            display: inline-block;

            height: 100%;

            vertical-align: middle;

            width:0px;

        }

<div class="outer4">

    <ul>

        <li>

            <div class="left1">

                <i class="i-img"></i>

            </div>

            <div class="left2">

                <div class="left2-content">

                    <div class="left2-content2">haorooms内部内容</div>

                </div>

            </div>

            <div class="left3">

                <i class="i-img"></i>

            </div>

        </li>

        <li>

            <div class="left1">

                <i class="i-img"></i>

            </div>

            <div class="left2">

                <div class="left2-content">

                    <div class="left2-content2">haorooms内部内容</div>

                </div>

            </div>

            <div class="left3">

                <i class="i-img"></i>

            </div>

        </li>

        <li>

            <div class="left1">

                <i class="i-img"></i>

            </div>

            <div class="left2">

                <div class="left2-content">

                    <div class="left2-content2">haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容</div>

                </div>

            </div>

            <div class="left3">

                <i class="i-img"></i>

            </div>

        </li>

    </ul>

</div>