问答详情
源自:4-2 侧边栏导航跟随案例

margin居中问题

后来nav height设置成了auto了,那margin-top 怎么设置高度的一半负值,达到垂直方向上居中

提问者:qq_瓶中沙_2 2019-12-03 16:51

个回答

  • 秋之枫华
    2019-12-30 16:21:04

    假如父元素为div,子元素为ul,div高度之所以设置成auto,是因为一开始不知道里面有几个li,这样的话,div的高度可以由li来撑开。然后就分为两种情况了:

    第一种,你知道每个li的高度,且知道一共多少个li,假如每个li的高度为40px,一共3个li,那么div的高度就是120px。相应的,给div设置margin-top:-60px就可以达到垂直方向居中的效果。

    第二种,你无法确定li的高度和数量的时候,那么div的高度也就无从得知。这个时候可以这么给div设置:

    div{

        position:absolute;

        top:50%;

        transform:translateY(-50%);

    }

    再给div设置top:50%之后,加上transform:translateY(-50%),这句代码的意思是div沿着垂直方向向下移动自身高度-50%的距离,实际效果也就是div会向上移动自身高度的50%,这样div在垂直方向上就居中了。

    其实比较建议这种设置方法,无论div的高度是否知道,这样都可以使div绝对垂直居中。