水平居中
1,行内及元素
设置父容器的text-align
text-align:center;
2,块级元素
设置自身宽度,然后设置margin
margin:0 auto;
3,绝对定位
元素有宽度的情况下,设置了绝对定位,就用left:0,right:0,margin:0 auto
left: 0;
right: 0;
margin: 0 auto
4,flex布局中
设置justify-content
justify-content:center
垂直居中
1,绝对定位
在自身有高度的情况下,用top和bottom加margin解决,弊端:绝对定位脱离了标准流,影响其他元素,并且依赖高度,不自由.
top:0;
bottom:0;
margin: auto 0;
2,flex布局
不用设置高度,在父布局设置display:flex和align-item:center,弊端:其他子类都会被居中
display:flex
align-item:center
3,相对定位
不用高度,相对定位中设置top和transform解决
position:relative;
top:50% //相对父view下移一半
transform:translate(0,-50%) //相对自身上移一半
