关于网易校园招聘2015的一道前端CSS题

前几天参加网易的校园招聘前端笔试的考试，虽说答得不算太糟糕，但最后还是跪了。想起来一道那时突然间不知道怎么下手的前端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水平和垂直居中的问题了。