前不久我□□□在运用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>
这样就达※到预期效□□□果了。
