css中在一个div中的div设relative，top:50%和bottom：50%,没有达到上下居中的效果?

Question

还有一个问题是一个div设置了position：relative，再设置float：left。可以这样设置吗？

Answer 1

直接看demo：css居中1 css居中2
推荐一下相关文章：CSS居中之美
【译】如何实现CSS居中？–CSS居中常用方法

Answer 2

第一个问题：
css中在一个div中的div设relative，top:50%和bottom：50%,不能达到上下居中效果。
首先，top:50%，是父元素height的50%，而不是自身height的50%
其次，同时设置top 和bottom是没有意义的，有点矛盾，不是么？
如果同时设置了top 和bottom，起作用的是top.同时设置了left和right，起作用的是left

第二个问题：
div设置了position：relative，再设置float：lef。是可以的。
如果同时设置了这两个，那么会先根据float找到自身应在的位置，再根据left、top...进行定位。
但如果是position：absolute 和float：left同时设置，float就不起作用了哦

Answer 3

你需要现在它的上部或者说是外部，设置一个relative。

可以这么理解：你预期的div需要相对一个参照物，去top：50% 和bottom：50% ， 所以需要给参照物设置一个position：relative，表明它是你要参照的对象！

Answer 4

外div relative width height
内div position left50% top50% margin-left:-自己宽的一半 margin-top:-自己高的一半