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

3、绝对定位+transform反向偏移

<style type="text/css">

.wrp3 { position: relative; } 
.box3 { 
    margin: auto; 
    position: absolute; 
    top: 50%; left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

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

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

 效果：

实现原理：方案3与方案2原理一样！不同点是使用了transform来代替margin做反向偏移，由于transform的计算基准是元素本身，所以这里可以用50%来做反向偏移。这个方案也需要固定尺寸值，浏览器以此为基准来计算定位！

来源：https://segmentfault.com/a/1190000006108996