1.行内文字居中,未设置高度,定位,浮动的情况下失效
text-align:center,水平居中
line-height: 行高,垂直居中
2.表格内元素的居中
text-align:center,水平居中
vertical-align:middle,垂直居中
3.元素水平居中,父元素和居中元素设置宽
使用外边距:margin:0 auto;
使用定位:position:absolute;(父元素也要定位)
left:50%;
margin-left:-width/2 或者 transform:translateX(-50%);
使用外边距2:margin-left: 50%;
transform:translateX(-50%);
4.元素垂直居中,父元素和居中元素设置高
使用定位:position:absolute;
top:50%;
margin-top:-height/2 或者 transform:translateY(-50%);
使用外边距:margin-top:50%;
transform:translateY(-50%);
5.元素水平垂直居中
使用外边距:margin-top:50%;
margin-left:50%;
transform:translate(-50%,-50%);
适用于未知宽高的元素
使用定位1:position:absolute;
left:50%;
top:50%;
margin-left:-width/2;
margin-top:-height/2;
适用于已知宽高的元素
使用定位2:position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
适用于未知宽高的元素
使用定位加外边距:position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
适用于已知宽高的元素
使用弹性盒模型:display:flex;
justify-content:center;
align-items:center;
适用于未知宽高的元素,兼容性好
使用表格属性:父元素:display:table-cell;
vertical-align:middle;
子元素:text-align:center;
适用于未知宽高情况下,但是float,position时会失效
使用内联块+伪元素生成的content:父元素:text-align:center;
父元素:before :content:".";
display:inline-block;
vertical-align:middle;
子元素:display:inline-block;
vertical-align:middle;
适用于未知宽高的元素,兼容性好,可自适应,但是水平居中要考虑换行符的问题