笔记:CSS常用的水平或垂直居中方法总结

水平居中

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%) //相对自身上移一半