Position:absolute属性定位居中

在web前端的日常工作中，经常会遇到设计师设计稿上不同模块重叠显示的需求。而要将两个不同模块重叠显示通常是通过CSS中的position属性来设置的。
Position可取的值有 absolute、fixed、relative、static、inherit这些，具体说明可见下表：

前不久我在运用html+css来实现设计稿的前端效果工作中遇到了一个模块上下左右居中的问题，最开始看到的这块内容的时候，首先想到的是运用position:absolute;属性来定位，虽然最终是成功实现了模块上下左右居中的效果，但是过程却有些波折。
 
举个例子，要实现下图的上下左右居中：



如果是正常来说，基本就是量出两个模块的高度，然后用margin属性来设置使红色模块上下左右相对于灰色模块居中，这里给的灰色模块是600px * 600px的大小，红色模块是100px*100px的大小。CSS代码实现如下：

<div class="div1">
<div class="div2"></div>
</div>
<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
margin: 250px auto;
background: #f00;
}
</style>

这样固然能实现红色模块居中的效果，但是却不太理想，如果红色模块是灰色模块的内容中独立出来的呢？
在这里我是毫不犹豫的就选择了position:absolute;这个属性来实现的。这离将红色模块相对于灰色模块独立出来，这里让灰色模块填充文字，给红色模块设置透明度来对比。CSS实现代码如下：

<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
background: #f00;
position: absolute;
left: 250px;
top: 250px;
opacity: .5;
}
效果如下：

虽然实现了这个效果，但是却不甚满意，要是不能固定灰色模块的高度呢，要是不能固定红色模块的高度呢？
 
于是稍加思索后我写出了下面这样的解决方法（这里还是默认上面的宽高）：
<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
transform: translateY(-50%);
background: #f00;
opacity: .5;
}
</style>
 
效果图如下：


问题来了，这里虽然上下是居中的，但是左右却明显的没有居中，经过测试，是
left: 50%;
transform: translateX(-50%);
这两个属性没有达成同等偏移。于是又改进了一下：
<style>
.div1{
width: 600px;
height: 600px;
position: relative;
background: #eee;
margin: auto;
overflow: hidden;
}
.div2{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
background: #f00;
opacity: .5;
}
</style>
 

这样就达到预期效果了。