水平居中:
1.行内级元素:设置父元素的 text-align:center
2.块级元素:设置当前块级元素的(宽度)
margin:0 auto
3.绝对定位:元素有宽度的情况下,
left: 0/right: 0/mrgin: 0 auto
4.flex:
justify-content:center
垂直居中:
1.绝对定位:在元素有高度的情况下,
top:0/bottom:0/margin:auto 0;
弊端:
1> 必须使用定位(意味着脱离标准流)
2> 必须给元素设置高度
示例:
2.垂直居中:flex布局(较推荐)
弊端:
1> flex布局中所有的元素都会被垂直居中
2> 相对来说,兼容性差一点点(基本可以忽略)
- 示例:
3.垂直居中:top/translate(较推荐)
1. 让元素向下位移父元素(背景元素)的 50%
2. 让元素向上位移自身的 50%
示例: