css居中对齐

居中对齐在css中有很多种方式，主要的分为以下几种：

一、水平对齐

1、行内元素居中对齐：text-align:center;

2、块级元素居中对齐：margin: 0 auto;

3、使用FLEX布局：

    a.横向：

        flex-direction: row; justify-content: center;

    b.纵向:

        flex-direction: column; align-items: center;

4、固定高度时的垂直居中：

position: relative; top: 0; left: 0; right: 0; bottom: 0; margin: auto 0;

二、垂直对齐

1、display: inline-block; vertical-align:  middle;

2、使用FLEX布局：

    a.横向：

        flex-direction: row; align-items: center;

    b.纵向:

        flex-direction: column; justify-content: center;

3、有固定高度时的垂直居中：

position: relative; top: 0; left: 0; right: 0; bottom: 0; margin: auto 0;