解决给父级div设置padding让子级元素居中的问题

在做网页过程中,我们常常会遇到让子级块状div居中的问题,如下图

解决给父级div设置padding让子级元素居中的问题_第1张图片
css3_padding1.png

代码





无标题文档




    

我们想让这个蓝色的小块水平垂直居中,不考虑其它方法,只用padding的方式,设置padding值,让它可以水平垂直居中,发现无论怎么设置padding的值都无法让它居中,且父级div还会越来越大,如图

解决给父级div设置padding让子级元素居中的问题_第2张图片
css3_padding2.png

那么重点来了,只要设置box-sizing: border-box;就可以解决父级div不断变大的问题,css样式如下

  

结果如图

解决给父级div设置padding让子级元素居中的问题_第3张图片
css3_padding3.png

下面只要我们设置padding为70px,就可以让它垂直居中啦,是不是很给力啊!

解决给父级div设置padding让子级元素居中的问题_第4张图片
css3_padding4.png

你可能感兴趣的:(解决给父级div设置padding让子级元素居中的问题)