CSS居中解决方案

发表于 | 更新于: | 分类于

Alt text

一、水平居中

(一)宽度固不固定的块都能使用

1.方式一

1
margin : 0 auto;

2.方式二

1
2
display：flex;
justify-content : center;

3.方式三

1
2
3
position : absolute;
left : 50%;
transform : translate(-50%,0);

(二)只有宽度固定的块能使用

1
2
3
position : absolute;
left : 50%;
margin-left : -width/2 px;

二、垂直居中

(一)高度固不固定的块都能使用

1.方式一

1
2
display：flex;
align-item : center;

2.方式二

1
2
3
position : absolute;
top : 50%;
transform : translate(0,-50%);

(二)只有高度固定的块能使用

1
2
3
position : absolute;
top : 50%;
margin-left : -height/2 px;