问题描述
在写CSS样式的时候,很多时候我们都希望div内部的div能够居中。
解决方案
- 通过定位和平移解决。(box1是外部盒子,box2是内部盒子)
.box1 {
position: relative;
}
.box2 {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
- 利用布局等式的auto解决
.box1 {
position: relative;
}
.box2 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
- 利用弹性盒子
.box1 {
display: flex;
justify-content: center;
align-items: center;
}