前端之css各种居中

css各种居中

水平居中

1. .parent{

2.    text-align: center;

3. }

4. .child{

5.    display: inline-block;

6. }

1. .child{

2.    display:table;

3.    margin: 0 auto;

4. }

1. .parent{

2.    position:relative;

3. }

4. .child{

5.    position:absolute;

6.    left:50%;

7.    transform: translateX(-50%);

8. }

垂直居中

• table-cell配合vertical-align

1. .parent{

2.    display: table-cell;

3.    vertical-align:middle;

4. }

absolute配合tranform

1. .parent{

2.    position:relative;

3. }

4. .child{

5.    position:absolute;

6.    top: 50%;

7.    transform: translateY(-50%);

8. }

水平+垂直居中

• inline-block配合text-align加上table-cell配合vertical-align

1. .parent{

2.    display: table-cell;

3.    vertical-align:middle;

4.    text-align:center;

5. }

6. .child{

7.    display: inline-block;

8. }

1. .parent{

2.    position: relative;

3. }

4. .child{

5.    position: absolute;

6.    left: 50%;

7.    top: 50%;

8.    transform: translate(-50%,-50%);

9. }

全能的flex

1. .parent{

2.    display: flex;

3.    justify-content: center;

4. }

1. .parent{

2.    display: flex;

3.    align-items: center;

4. }

1. .parent{

2.    display: flex;

3.    justify-content: center;

4.    align-items: center;

5. }