如何将一个盒子居中显示如何将一个盒子居中显示

基础代码
样式：

.parent { height: 600px; width: 600px; border: 2px solid black; }.child { height: 300px; width: 300px; background-color: chocolate; }

html代码：

设置盒子的位置
方法一、通过定位---父盒子相对定位，子盒子绝对定位，top为父盒子的50%（将整个子盒子看成一个点），移动父盒子的50%，相当于多移动子盒子宽度的50%，所以需要margin-top向上移动-50%

文章图片
image.png

.parent { height: 600px; width: 600px; border: 2px solid black; position: relative; } .child { height: 300px; width: 300px; background-color: chocolate; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; }

方法二、通过margin:auto来实现---另一个display:inline-block; margin:0px auto可以实现按钮的水平居中

.parent { height: 600px; width: 600px; border: 2px solid black; position: relative; } .child { height: 300px; width: 300px; background-color: chocolate; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

方法三、通过display：table-celll，来实现

.parent { height: 600px; width: 600px; border: 2px solid black; display: table-cell; /*display 当赋值为table-cell时，此元素会作为一个表格单元显示于th td */ vertical-align: middle; /*设置元素垂直对齐方式 */ text-align: center; /*规定元素中文本的水平对齐方式*/ } .child { height: 300px; width: 300px; background-color: chocolate; display: inline-block; }

【如何将一个盒子居中显示】方法四、弹性盒子来实现-display：flex

.parent { height: 600px; width: 600px; border: 2px solid black; display: flex; justify-content: center; /*弹性盒子里边横轴对齐方式*/ align-items: center; /* 弹性盒子纵轴的对齐方式*/ } .child { height: 300px; width: 300px; background-color: chocolate; }

方法五、通过就算直接通过margin来移动

.parent { height: 600px; width: 600px; border: 2px solid black; } .child { height: 300px; width: 300px; background-color: chocolate; margin-top: 150px; margin-left: 150px; }

方法六、使用cale来实现

.parent { height: 600px; width: 600px; border: 2px solid black; position: relative; } .child { height: 300px; width: 300px; background-color: chocolate; position: absolute; top: calc(150px); left: calc(150px); }

参考文章; https://www.cnblogs.com/gzy-tw/p/11205854.html