【HTML+CSS】CSS实现元素（文字，图片）的垂直居中和水平居中

 【一】、通过CSS实现元素（文字，图片）的水平居中：

     1，

     2，

 【二】、通过CSS实现元素（文字，图片）的垂直居中：

     特别注明：  文字和图片一起显示时，垂直居中方式需要相关调节；

     1，通过table-table-cell-vertical-align，实现垂直居中：   

<div id="wrapper">
    <div id="cell">
        <span>垂直居中第一种方法</span>
        <!--<img src="closeIcon.png"/>-->
    </div>
</div>

#wrapper {
    width: 200px;
    height: 100px;
    border: 1px solid red;
    display: table;
}
#cell {
    display: table-cell;
    vertical-align: middle;
}

    2，通过增加一个特殊的div，实现垂直居中：

<div class="title">
    <div class="flag"></div>
    <div class="content">
        <img src="closeIcon.png">
        <!--<span>垂直居中第二种方法</span>-->
    </div>
</div>

.title {
    width: 300px;
    height: 200px;
    border: 1px solid red;
}
.title .content img {
    width: 35px;
}
.content{
    display: inline-block;
    vertical-align: middle;
}
.flag{
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}

   3，通过定位和translate，实现垂直居中：

<div class="title">
    <span>垂直居中第三种方法</span>
    <!--<img src="closeIcon.png">-->
</div>

.title {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid red;
}
.title span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

   4，通过直接设置table-cell和vertical-align，实现垂直居中：

<div class="title">
    <span>垂直居中第四种方法</span>
    <!--<img src="closeIcon.png">-->
</div>

.title {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}

   5，通过absolute定位和负边距，实现垂直居中：【注意content的高度height】

<div class="box">
    <div class="content">垂直居中第五种方法</div>
</div>

.box{
    width: 300px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.content {
    position: absolute;
    top: 50%;
    height: 20px;
    margin-top: -10px;
    border: 1px solid red;
}

  6，知道宽度height，通过设置line-height，实现垂直居中：

<div id="content">
    垂直居中第六种方法
</div>

#content {
    height: 100px;
    line-height: 100px;
}

未完，待续、、、、