我该如何将蓝色盒子居中在红色盒子内?
我看到蓝色盒子的左边正好位于红色盒子的中间,但我想将整个蓝色盒子居中,而不是它的左边。这些盒子的尺寸并不固定。我想要无论盒子的尺寸如何都能够对齐。可以在这里进行测试。谢谢!
HTML:
<div id="rel">
<span id="abs">Why I'm not centered ?</span>
</div>
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}