大盒子内的小盒子常见居中方式-阿南达文事网

大盒子内的小盒子常见居中方式

最初盒子样式

大小盒子嵌套关系

<body>

</div>

</body>

大盒子样式块

.box1 {

position: relative;

width: 300px;

height: 300px;

background-color: pink;

}

原理图

当前效果图

之后还需要向左移动自身宽度的50%，再向上移动自身高度的50%

1.当子盒子的大小是固定时

可以使用子绝父相，子盒子使用绝对定位，父盒子使用相对定位，再使用margin来实现子盒子的水平垂直居中。

.box2 {

position: absolute;

left: 50%;

top: 50%;

margin-left: -50px;

margin-top: -50px;

width: 100px;

height: 100px;

background-color: yellowgreen;

}

2.当子盒子的大小非固定时

使用子绝父相加位移来完成

.box2 {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

width: 100px;

height: 100px;

background-color: yellowgreen;

}

还可以使用特殊方法子绝父相将四个方位设置0后，margin:auto auto来实现居中

.box2 {

position: absolute;

left: 0;

top: 0;

bottom: 0;

right: 0;

margin: auto auto;

width: 100px;

height: 100px;

background-color: yellowgreen;

}

最终三种方法实现的效果图（即完成大盒子中的小盒子水平垂直居中）

三种方式推荐第二种方式，使用子绝父相加位移来完成大盒子中的小盒子水平垂直居中。

本文若有不当之处，请指正。

大盒子内的小盒子常见居中方式