[html5]html5+css做垂直水平居中的三种实现方法源代码

由于HTML语言的定位问题，在网页中实现居中也不是如word中那么简单，尤其在内容样式多变，内容宽高不定的情况下，要实现合理的居中也是颇考验工程师经验的。
1、绝对定位+margin：auto

<style type="text/css"> 
    .wrp { 
        background-color: #b9b9b9; 
        width: 240px; 
        height: 160px; 
    } 
    .box { 
        color: white; 
        background-color: #3e8e41; 
        width: 200px; 
        height: 120px; 
        overflow: auto; 
    } 
    .wrp1 { position: relative; } 
    .box1 { 
        margin: auto; 
        position: absolute; 
        left: 0; right: 0; top: 0; bottom: 0; 
    } 
</style> 
<div class="wrp wrp1"> 
    <div class="box box1"> 
        <h3>完全居中层1：</h3> 
        <h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化CuPlayer.com酷播官方</h3> 
    </div> 
</div> 

 效果：

实现原理：利用css定位规则，设置左右、上下方向定位为0，margin为auto，让css根据定位计算margin值，用hack的方式实现居中。居中块（绿色）的尺

寸需要可控,因为css计算margin时也需要参考尺寸值，由于四周为0，所以自动计算的尺寸是与父容器一样的。无论是设置width、height或者是 max-

height、max-width，都是让尺寸不会扩大到与父级一样。

2、绝对定位+margin反向偏移

</style><style type="text/css">

.wrp2 { position: relative; } 
.box2 { 
    position: absolute; 
    top: 50%; left: 50%; 
    margin-left: -100px; /* (width + padding)/2 */ 
    margin-top: -75px; /* (height + padding)/2 */ 
} 

</style><div class="wrp wrp2">

<div class="box box2"> 
    <h3>完全居中方案二：</h3> 
    <h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化</h3> 
</div> 

 </div>

效果：

实现原理：由于top、left偏移了父对象的50%高度宽度，所以需要利用margin反向偏移居中块的50%宽高。而margin中不能使用百分比，因为百分比是针对

父对象的，所以需要手动计算定值指定margin值。这个方案需要固定尺寸值，以此来计算margin反向偏向值，所以方案2比方案1稍差！