CSS实现子盒子在父盒子里水平垂直居中的几种方法,前提:父、子盒子宽高均不为0,且子盒子宽高比父盒子小
方法1:父盒子开启flex布局,子盒子设置 margin: auto;
.outer {
...
display: flex;
}
.inner {
...
margin: auto;
}
方法2:父盒子开启flex布局,设置主轴对齐方式(默认水平方向) justify-content
居中,侧轴对齐方式 align-items
居中
.outer {
...
display: flex;
justify-content: center;
align-items: center;
}
方法3:父盒子开启相对定位,子盒子开启绝对定位,先让子元素向下移动父元素的一半,再让子元素向上移动自己的一半
.outer {
position: relative;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}