水平垂直居中问题

水平居中？

块级元素水平居中的方法

1.margin：0 auto方法

2.display：flex；justify-content: center;

3.display：table；margin：0 auto

内联元素水平居中的方法

在父元素中设置text-align=center即可

垂直居中？

块级元素垂直居中的方法

1.在父容器中display: flex;align-items: center;

2.给父元素设置相对定位，子元素position：absolute；top：50%

3.在子元素内加上transform: translateY(-50%);和margin-top: -50px;

4.利用相对定位，在子元素中设置position: relative;top: 50%;transform: translateY(-50%);

5.在父容器中设置display:flex;子元素设置align-self: center;

内联元素垂直居中的方法

1.让 line-height 与 height 相等

2.display: flex;align-items: center;