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

最新推荐文章于 2023-07-14 13:32:49 发布

chengqijiang8276

最新推荐文章于 2023-07-14 13:32:49 发布

阅读量949

点赞数

原文链接：https://my.oschina.net/u/3530749/blog/1494677

版权

#解决给父级div设置padding让子级元素居中的问题
在做网页过程中，我们常常会遇到让子级块状div居中的问题，如下图
输入图片说明代码

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <style type="text/css">
 .box{
 	margin: 20px 20px;
 	width: 200px;
 	height: 200px;
 	background: #00A72B;
 	border: 5px solid #007FFF;
 
 }
 .box .box-content{
 	width: 50px;
 	height: 50px;
 	background: #3399FF;
 }
 </style>
 </head>
 
 <body>
 	<div class="box">
 		<div class="box-content"></div>
 	</div>
 
 </body>
 </html>

我们想让这个蓝色的小块水平垂直居中，不考虑其它方法，只用padding的方式，设置padding值，让它可以水平垂直居中，发现无论怎么设置padding的值都无法让它居中，且父级div还会越来越大，如图
输入图片说明那么重点来了，只要设置box-sizing: border-box;就可以解决父级div不断变大的问题，css样式如下

<style type="text/css">
 .box{
 	margin: 20px 20px;
 	width: 200px;
 	height: 200px;
 	background: #00A72B;
 	border: 5px solid #007FFF;
 	padding: 50px;
 	box-sizing: border-box;
 }
 .box .box-content{
 	width: 50px;
 	height: 50px;
 	background: #3399FF;
 }
 </style>

结果如图
输入图片说明下面只要我们设置padding为70px,就可以让它垂直居中啦，是不是很给力啊！