水平对齐
行内
1、父元素text-align:center;
块级
1、父元素width:
margin:0 auto;
2、父元素text-align:center;
本元素display:inline-block;
3、父元素display:table;
margin:0 auto;
4、父元素display:flex;
justify-content:center;
垂直对齐
行内
1、父元素height:
line-height:
2、父元素display:table;
本元素display:table-cell;
vertical-align:middle;
块级
1、父元素display:flex;
height:
align-items:center;
同时居中
行内
1、父元素height:
line-height:
text-align:center;
块级
1、父元素display:flex;
height:
align-items:center;
justify-content:center;
2、父元素position:relative;
本元素position:absolute;
top:50%;
left:50%;
margin:
3、父元素position:relative;
本元素position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
4、父元素position:relative;
本元素position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;