css中在一个div中的div设relative,top:50%和bottom:50%,没有达到上下居中的效果?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

a123456678 2016-05-27 11:34:44 2331

还有一个问题是一个div设置了position:relative,再设置float:left。可以这样设置吗?

前端开发
分享到
取消 提交回答
全部回答(2)
  • toobe
    2019-07-17 19:17:33
    因为第一个div没有定义样式,实际上第一个div没有长宽,导致里面的div的相对定位没有参照标准,需要定义第一个div的高,才能有参照物;
    0 0
  • a123456678
    2019-07-17 19:17:33

    第一个问题:
    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就不起作用了哦

    0 0
添加回答
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程