先来点思想斗争

不知怎么回事，突然被这个问题搞得很郁闷

其实也没什么，因为你所知道的每个属性，都只是在最单纯的环境下的表现

一旦大的环境背景改变了，它可能就不会那么乖了

因为大的环境下，某些属性可能会冲突，这时候就会有个取舍问题，但不一定就是后者取代前者

代码的深刻理解

（1）、基本居中

水平居中：(行内元素)

text-align: center;

       
用于父级块级元素内容的水平居中，最差也得是个行内块级元素

水平居中：（块级元素）

margin: 0 auto;

       
用于块级元素水平居中，还有可能垂直居中，但得配合其它属性

垂直居中：（默认特性）

<td>td元素默认就是垂直居中</td>

       
理解：其实它的本质，是默认设置了以下两属性：

display：table-cell;
vertical-align: middle;

       
拓展理解：vertical-align默认适用于inline元素和table-cell元素，所以配合使用，实现居中

（2）、复杂垂直居中

垂直居中：（绝对定位+ margin:atuo）

.box {
    width: 800px;
    height: 600px;
    border: 1px solid black;

    position:relative;
}

.box img {
    width:200px;
    height: 200px;

    position: absolute;
    margin: auto;
    left:0;
    right: 0;
    top:0;
    bottom: 0;
}

       
理解：这个其实就是，简单属性拼凑，产生的效果：绝对定位了——>每个位置值都为0——>宽高又固定——>刚好来了margin:auto;

垂直居中：（借助table-cell+vertical-align）

.box {
    width: 800px;
    height: 600px;
    border: 1px solid black;

    //借助table-cell+vertical-align的垂直居中
    display:table-cell;
    vertical-align: middle;

    text-align: center; //水平居中
}

.box img {
    width:200px;
    height: 200px;
}

       
理解：这个的实现，就是基于表格单元格默认垂直居中方式

垂直居中：（借助background属性）

.box {
    width: 800px;
    height: 600px;
    border: 1px solid black;

    background: url("4.jpg") no-repeat center center
}

       
理解：主要是background-position: center center;

垂直居中：（借助line-height+vertical-align）

HTML：
    <div class="box">
        <span>这是一行文字</span><img src="4.jpg" >
    </div>


CSS:
    .box {
        width: 800px;
        height: 600px;
        border: 1px solid black;

        line-height: 600px;
    }

    .box img {
        vertical-align: middle;
    }

       
理解：line-height原本就会使得一行文字垂直居中，会产生一个行基线；

       
            图片太高，文字和图片默认基线对其；

                  
vertical-align:定义行内元素基线相对于所在行基线对其方式

（3）、有属性冲突的垂直居中

此例讲解：表格单元格和绝对定位的冲突

.box {
    //这是一切根源所在
    position:absolute;
    left: 0;
    top: 0;

    width: 800px;
    height: 600px;
    border: 1px solid black;

    //借助table-cell+vertical-align的垂直居中
    display:table-cell;
    vertical-align: middle;

    text-align: center; //水平居中
}

.box img {
    width:200px;
    height: 200px;
}

       
理解：最后不能实现垂直居中的效果，根源在于，position:absolute;产生块级元素，而vertical-align适用于table-cell元素，所以起冲突了，绝对定位占上风，所以无效果。

==总结：这里面最重要的是样式效果起冲突时的选择问题，当以后写出代码不符合预期效果，一般都是特性冲突的结果==