为了账号安全,请及时绑定邮箱和手机立即绑定

margin居中问题

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

正在回答

1 回答

假如父元素为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绝对垂直居中。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

margin居中问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信