div基本布局

<div class="main"> <div class="center"></div> </div> css样式

1. 配合定位与margin：auto 父元素加相对定位，子元素加绝对定位

.main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; background-color: skyblue; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }

2.利用flex布局，设置水平与竖直方向的内容居中。

.main{ width: 300px; height: 300px; background-color: red; display: flex; justify-content: center; align-items: center; } .center{ width: 100px; height: 100px; background-color: greenyellow; }

3.利用position:absolute与transform :这里需要记住的是transform中translate使用百分比时相对的是自己的长宽，不是父盒子的。

.main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; background-color: pink; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }

4.定位 与负margin配合 只适合子盒子长宽固定的情况

.main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; background-color: pink; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }

5.display:table-cell display:table-cell；与vertical-align:middle 的作用是让子盒子在数值方向上居中 margin:auto;则让子盒子在水平方向居中，若只想让盒子在某个方向居中，去掉另一个就可以了。

.main{ width: 300px; height: 300px; background-color: red; display: table-cell; vertical-align: middle; } .center{ width: 100px; height: 100px; background-color: #000; margin: auto; }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。