前言
本文分三个类型来讨论居中方式；分别是：定位模式、display模式和伪类模式;
在开始之前，先定义好两个元素的关系，如下：
<body>
<div class="parent" data-text="我是父元素">
<div class="child">我是一个子元素</div>
</div>
</body>
1
2
3
4
5
2
3
4
5
定位模式
父元素，子元素不定宽高
div.parent{
position: relative;
border:1px solid seagreen;
margin:0 auto;
}
div.child{
position:absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
background-color: sandybrown;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
父元素不定宽高，子元素定宽高
div.parent{
position: relative;
border:1px solid seagreen;
margin:0 auto;
}
div.child {
width: 100px;
height: 100px;
background-color: sandybrown;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
父元素不定宽高，子元素定宽高
div.parent{
position: relative;
border:1px solid seagreen;
margin:0 auto;
}
div.child {
width: 100px;
height: 100px;
background-color: sandybrown;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
唠叨一句:使用 margin-left 和 margin-top, 相对的是父元素，transform： translate 相对的自身
display模式
弹性盒布局，父元素,子元素都不用定宽高
div.parent{
display: flex;
justify-content: center;
align-items: center;
border:1px solid springgreen;
}
div.child{
background-color: thistle;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
网格(display: grid)布局，父元素,子元素都不用定宽高
div.parent {
display: grid;
border:1px solid springgreen;
}
div.child {
width: 10px;
height: 10px;
justify-self: center;
align-self: center;
background-color: thistle;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
弹性盒和margin的结合，父元素子元素都不用定宽高
div.parent{
display:flex;
}
div.child{
margin:auto;
background-color: thistle;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
父元素的表格布局，子元素占满父元素，内容居中,这种实现居中方式意义不大
div.parent {
display: table;
border:1px solid springgreen;
}
div.child {
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: thistle;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
table-cell布局，父元素宽高不确定时，子元素占满父元素大小,内容居中,父元素确定宽高时,子元素不用确定宽高
.parent {
display: table-cell;
background-color: orange;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
伪类
转换为行内块状元素可以水平居中，通过父元素的伪类设置高度100%，并转为行内快装元素，通过设置vertical-align: middle；实现垂直居中;
div.parent{
text-align: center;
border:1px solid seagreen;
height: 50%;
}
div.parent::before{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
div.child{
width: 100px;
height: 50px;
display: inline-block;
vertical-align: middle;
background-color: sandybrown;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
更多关于vertical-align的了解,可以看看张鑫旭关于它的讲解