把一个div里面的文字居中，大家都很清楚，不就是写css，text-align:center;和line-height:盒子的高度；
#box{
width:200px;
height:200px;
border:2px solid red;
margin:50px auto;
line-height:200px;
text-align:center;
}
这种文字居中比较简单，就设置行高和文字水平居中就行了，没有什么难度。
不过要是想把一个div在另外一个div中居中，该怎么办？
可能有的人就会说，直接margin:0 auto;这样就能水平居中了。这样水平居中是可以，那垂直居中怎么办？高度相减除以二的上下边距？
#small{
width:100px;
height:100px;
border:2px solid blue;
margin:50px auto;
}
咋一看，这样还真的可以啊。但是仔细一想，如果外面div改变高度，就又得计算了。而且，建议margin值尽量少用，尤其是层次太多了，很容易出现一些类似双边距之类的bug，到时就很难解决了。
那有没有一种直接居中后就永不改变，不管父元素怎么变高度和宽度，一直都是居中的。还真的这样的办法。
#box{
position: relative;
margin:50px auto;
width:200px;
height:300px;
border:2px solid red;
}
#small{
position:absolute;
bottom:0px;
top:0px;
left:0px;
right:0px;
width:100px;
height:100px;
margin:auto;
border:2px solid blue;
}
通过定位的方式和margin自适应相结合，就可以达到div万能居中，无论父元素怎么变长宽，都居中。
发表评论