css居中对齐

阅读 160

2021-09-28

居中对齐在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;

精彩评论(0)

0 0 举报