简单的来说一下在别人问你这个问题的时候怎么来回答它
前端新人,如有错误求大佬指出~求教💝
情景复现
大佬提问:“你知道一个div盒子怎么水平垂直居中吗?”
我的回答:“比较实用的有四种,纯flex,flex+margin,定位+transform和定位+margin都可以做到盒子水平垂直居中的效果。”
box是大盒子box-content是里面的小盒子
方式一: 纯flex
.box {
display: flex;
justify-content: center;
align-items: center;
}
方式二:flex加margin
.box {
display: flex;
}
.box-content {
margin: auto;
}
方法三:定位+transform
.box {
position: relative;
}
.box-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方法四:定位+margin
.box {
position: relative;
}
.box-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}