元素水平居中
1、子父元素宽度固定:子元素设置margin:0 auto;
2、子父元素宽度固定:父元素设置text-align:center;
并且子元素设置display:inline-block;
- 以上两种情况子元素不能设置浮动,否则居中失效。
元素垂直居中
1、设置子元素和父元素的行高一样。
2、子元素设置为行内块,再加vertical-align:middle。
3、已知父元素高度,子元素相对定位,通过transform:translateY(-50%)。
4、不知道父元素高度,子绝父相,
子元素top:50%,transform:translateY(-50%)
5、创建一个隐藏节点,让隐藏节点的height为剩余高度的一半。
6、给父元素display:table,子元素display:table-cell,vertical-align:middle。
7、给父元素添加伪元素。
8、弹性盒,父元素display:flex,子元素align-self:center。
元素水平垂直居中
1、子元素相对于父元素绝对定位:子元素的top、left设置为50%并且子元素margin-top和margin-left减去各自宽高的一半。
2、子元素相对于父元素绝对定位:子元素上下左右全为0,然后设置子元素margin:auto。
3、父元素设置display:table-cell ;vertical-align:middle,子元素设置margin:auto。
4、子元素相对定位,子元素top,left值为50%,transform:translate(-50%,-50%)。
5、子元素相对父元素绝对定位,子元素top,left值为50%,transform:translate(-50%,-50%)。
6、父元素设置弹性盒子:display:flex; justfy-content:center ;align-item:center; justfy-content:center。