盒子水平居中 方法给目标元素设置margin:自定义值 auto; 盒子垂直居中 父盒子不设置高度 而设置 上下padding 左右为0 <br/> <br/> 如果设置盒子上下左右都居中 首先子盒子设置margin:0 auto; 父盒子不设置高度，而设置上下padding值 左右为0； <p style="color:red">工作中真正设置垂直居中使用的定位，很少使用padding去挤高度。 </p> 代码： ``` <style> *{ padding: 0; margin: 0; } div{ width:300px; padding:50px 0px; background-color: cadetblue; } p{ width:100px; height:100px; background-color:crimson; margin: 0 auto; } </style> <div> <p></p> </div> ``` 效果：