还有一个问题是一个div设置了position:relative,再设置float:left。可以这样设置吗?
直接看demo:css居中1 css居中2
推荐一下相关文章:CSS居中之美
【译】如何实现CSS居中?–CSS居中常用方法
外div relative width height
内div position left50% top50% margin-left:-自己宽的一半 margin-top:-自己高的一半
你需要现在它的上部或者说是外部,设置一个relative。
可以这么理解:你预期的div需要相对一个参照物,去top:50% 和bottom:50% , 所以需要给参照物设置一个position:relative,表明它是你要参照的对象!
第一个问题:
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就不起作用了哦