css居中完整版

是时候对 css 居中的各种方式来波总结了!下面是一提到居中就应该联想到的关键属性:

水平居中

行内元素/行内块级元素特有

1
2
3
.box {
text-align: center;
}

块级元素特有

1
2
3
.box {
margin: 0 auto;
}

两者都可使用

法一

1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.box {
position: absolute;
left: 50%;
width: 200px;
margin-left: -100px;
}

法二

1
2
3
4
5
6
7
8
.parent {
position: relative;
}
.box {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

法三

1
2
3
4
.parent {
display: flex;
justify-content: center;
}

垂直居中

方法一

1
2
3
4
.parent {
height: auto;
padding: 100px 0;
}

方法二

1
2
3
4
.parent {
height: 100px;
line-height: 100px;
}

方法三

1
2
3
4
5
6
7
.parent {
display: table;
}
.box {
display: table-cell;
vertical-align: middle;
}

方法四

1
2
3
4
5
6
.parent {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}

方法五

1
2
3
4
.parent {
display: flex;
align-items: center;
}

方法六

1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.box {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

方法七

1
2
3
4
5
6
7
8
.parent {
position: relative;
}
.box {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

方法八

ghost element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ghost-center {
position: relative;
}
.ghost-center::before {
content: ' ';
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
---- 本文结束,感谢您的阅读 ----