元素居中显示的方法总结

水平居中：

1.elements的display属性为inline或者inline-*(inline-block,inline-table,inline-flex等)（比如文本元素或者a链接）

①可以使用text-align:center

固定宽度的块级元素

①使用margin:0 auto实现水平居中

②绝对定位，left:50%,margin-left:-1/2元素宽度

垂直居中：

1.elements的display属性为inline或者inline-*(inline-block,inline-table,inline-flex等)（比如文本元素或者a链接）

单行：①使用padding-top和padding-bottm相同值

　　　②使用line-height，white-space:nowrap

　　　③使用vertical-align:middle

多行：

2.块级元素

固定高度：①绝对定位，top:50%,margin-top:-1/2元素高度

高度不固定：①绝对定位，top:50%,translateY(-50%)

      flex布局：display:flex;flex-direction:column;justify-content:center;

转载于:https://www.cnblogs.com/walk-on-the-way/p/5743576.html