前几天参加网易的校园招聘前端笔试的考试,虽说答得不算太糟糕,但最后还是跪了。想起来一道那时突然间不知道怎么下手的前端CSS填空题,今天拿出来跟大家分享。
题目不难,具体就是让你如何在一个不知道宽高的DIV中垂直和水平居中一个Div。好吧,我先得承认我的技术还是有点水,以至于这种题目都不能马上答上来,略水。
这里给大家说说实现,如果有不对的地方请论坛的大牛指正。
首先写主要的HTML代码
<div id="out">
<div id ="in"></div>
</div>
下面开始说说CSS样式添加:对于外层的div 可以这样写:#out{position:relative;background:#ccc;}
对于内层的DIV,自然想到先要绝对定位,然后涉及到一个小小的计算问题。这个DIV宽高分别为100px,故
#in{width:100px;height:100px;position:absolute;left:50%;top:50%;margin:-50px 0 0 -50px;background:#fcc;}
这时候,如果单纯这样是不会出现想要的效果的。虽然说out这个DIV的宽高并不知道,不过这也只是个假设,无非就是让考生不依赖父DIV的宽高去设置通用的居中对称,所以调试时我们还得给父级DIV设置一个宽高,并且这个宽高都要大于子DIV的宽高。
这样就解决了一个通用的DIV相对父级DIV水平和垂直居中的问题了。