前端居中问题总结

一、text-align：center
只是将元素下面的内联元素居中，常见于文字水平居中。

二、flex布局
display：flex；
justify-content: center； 水平居中
align-items: center 垂直居中

三、垂直居中
1，line-height = height时
2，父级盒子： position:relative; 相对定位
position:absolute;
bottom：0;
transform:translateY(50%);}
3，vertial-align :middle

四、水平居中
1，margin :0 auto;
2,父级盒子： position:relative;
position:absolute;
left：50%;
transform:translateX(-50%);}