在学习大前端过程中,总结了元素水平垂直居中的几种方法
实现如图:
说明:前四种方法使用到的class为wrap的div都设置为{display:relative;}
1.子级设置 absolute+margin:auto,top、left、right、bottom的值相等即可,不一定要都是0
2.子级设置absolute+left:50%;top:50%;margin-left:减去此元素宽度的一半;margin-top:减去此元素高度的一半
缺点:需要知道子元素的宽高
3.子级absolute+left:calc(50%减去宽度的一半);top:calc(50%减去高度的一半);
4.子级 absolute+left:50%;top:50%;再使用transfrom:translate(-50%,-50%)
5.flex布局(建议使用)
好了,今天的分享就到这里啦,大家可以自己试试哟,如发现有错误,欢迎指出~