§ 行内元素的水平居中

并且适用于文字,链接,及其inline或者inline-block、inline-table和inline-flex。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
.container-1 {
text-align: center;
background-color: #eee;
}
.content-1 {
display: inline-block;
background-color: #4183c4;
}
</style>

<div class="container-1">
<div class="content-1">content-1</div>
</div>

§ 块状元素的水平居中

只需要将它的左右外边距margin-left和margin-right设置为auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
.container-2 {
background-color: #eee;
}
.content-2 {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #4183c4;
}
</style>

<div class="container-2">
<div class="content-2">content-2</div>
</div>

§ 多个块状元素的水平居中

将要水平排列的块状元素设为display:inline-block,然后在父级元素上设置text-align:center。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">
.container-3 {
background-color: #eee;
text-align: center;
}
.content-3 {
display: inline-block;
width: 100px;
height: 100px;
background-color: #4183c4;
}
</style>

<div class="container-3">
<div class="content-3">content-3</div>
<div class="content-3">content-3</div>
<div class="content-3">content-3</div>
</div>

§ 使用flexbox实现多个块状元素的水平居中

要为元素设置flexbox布局,只需将display属性值设置为flex。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">
.container-4 {
display: flex;
justify-content: center;
background-color: #eee;
}
.content-4 {
width: 100px;
height: 100px;
background-color: #4183c4;
}
</style>

<div class="container-4">
<div class="content-4">content-4</div>
<div class="content-4">content-4</div>
<div class="content-4">content-4</div>
</div>

§ 已知高度宽度元素的水平垂直居中

绝对定位与负边距实现。
利用绝对定位,将元素的top和left属性都设为50%,再利用margin边距,将元素回拉它本身高宽的一半,实现垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
.container-5 {
position: relative;
background-color: #eee;
height: 200px;
}
.content-5 {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
background-color: #4183c4;
}
</style>

<div class="container-5">
<div class="content-5">content-5</div>
</div>

§ 未知高度和宽度元素的水平垂直居中:inline-block

当要被居中的元素是inline或者inline-block的时候,可以巧妙的将父级容器设置为display:table-cell。配合text-align:center和vertical-align:middle即可以实现水平垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">
.container-6 {
display: table-cell;
height: 200px;
width: 1000px;
text-align: center;
vertical-align: middle;
background-color: #eee;
}
.content-6 {
display: inline-block;
background-color: #4183c4;
}
</style>

<div class="container-6">
<div class="content-6">content-6</div>
</div>

§ 未知高度和宽度元素的水平垂直居中:css3

利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">
.container-7 {
position: relative;
background-color: #eee;
height: 200px;
}
.content-7 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #4183c4;
}
</style>

<div class="container-7">
<div class="content-7">content-7</div>
</div>

§ 未知高度和宽度元素的水平垂直居中:flex

使用flex布局,无需绝对定位等改变布局的操作,可以轻松实现元素的水平垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">
.container-8 {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #eee;
}
.content-8 {
background-color: #4183c4;
width: 200px;
height: 80px;
}
</style>

<div class="container-8">
<div class="content-8">content-8</div>
</div>