CSS3疑难问题---7、实现元素水平垂直居中
一、总结
一句话总结：
方式一：绝对定位+margin: auto;：子元素绝对定位，并且偏移全为0，margin设置为auto
方式二：绝对定位+margin自身负偏移：子元素绝对定位且左（left）上（top）偏移50%，再margin负偏移左（left）上（top）自身的一半
方式三：绝对定位+transform:translate 平移方式：子元素绝对定位且左（left）上（top）偏移50%，使用transform:translate实现自身左上偏移50%
方式四：弹性盒子：设置父元素为弹性盒子，并且设置主轴对齐方式（justify-content）和侧轴对齐方式（align-items）都为center
1、实现元素水平垂直居中 方式一：绝对定位+margin: auto;？
子元素绝对定位，并且偏移全为0，margin设置为auto
.parent_box{
400px;
height: 400px;
background-color: lightseagreen;
position: relative;
}
.child_box{
200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
2、实现元素水平垂直居中 方式二：绝对定位+margin自身负偏移？
子元素绝对定位且左（left）上（top）偏移50%，再margin负偏移左（left）上（top）自身的一半
.parent_box{
400px;
height: 400px;
background-color: lightseagreen;
position: relative;
}
.child_box{
200px;
height: 200px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
3、实现元素水平垂直居中 方式三：绝对定位+transform:translate 平移方式？
子元素绝对定位且左（left）上（top）偏移50%，使用transform:translate实现自身左上偏移50%
.parent_box{
400px;
height: 400px;
background-color: lightseagreen;
position: relative;
}
.child_box{
200px;
height: 200px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
4、实现元素水平垂直居中 方式四：弹性盒子？
设置父元素为弹性盒子，并且设置主轴对齐方式（justify-content）和侧轴对齐方式（align-items）都为center
.parent_box{
400px;
height: 400px;
background-color: lightseagreen;
display: flex;
justify-content: center;
align-items: center;
}
.child_box{
200px;
height: 200px;
background-color: red;
}
二、实现元素水平垂直居中
博客对应课程的视频位置：7、实现元素水平垂直居中
https://www.fanrenyi.com/video/13/179
方式一：绝对定位+margin: auto;：
子元素绝对定位，并且偏移全为0，margin设置为auto
1 .parent_box{
2 400px;
3 height: 400px;
4 background-color: lightseagreen;
5 position: relative;
6 }
7 .child_box{
8 200px;
9 height: 200px;
10 background-color: red;
11 position: absolute;
12 left: 0;
13 right: 0;
14 top: 0;
15 bottom: 0;
16 margin: auto;
17 }
方式二：绝对定位+margin自身负偏移：
子元素绝对定位且左（left）上（top）偏移50%，再margin自身负偏移左（left）上（top）自身的一半
1 .parent_box{
2 400px;
3 height: 400px;
4 background-color: lightseagreen;
5 position: relative;
6 }
7 .child_box{
8 200px;
9 height: 200px;
10 background-color: red;
11 position: absolute;
12 left: 50%;
13 top: 50%;
14 margin-left: -100px;
15 margin-top: -100px;
16 }
方式三：绝对定位+transform:translate 平移方式：
子元素绝对定位且左（left）上（top）偏移50%，使用transform:translate实现自身左上偏移50%
1 .parent_box{
2 400px;
3 height: 400px;
4 background-color: lightseagreen;
5 position: relative;
6 }
7 .child_box{
8 200px;
9 height: 200px;
10 background-color: red;
11 position: absolute;
12 left: 50%;
13 top: 50%;
14 transform: translate(-50%,-50%);
15 }
方式四：弹性盒子：
设置父元素为弹性盒子，并且设置主轴对齐方式（justify-content）和侧轴对齐方式（align-items）都为center
1 .parent_box{
2 400px;
3 height: 400px;
4 background-color: lightseagreen;
5 display: flex;
6 justify-content: center;
7 align-items: center;
8 }
9 .child_box{
10 200px;
11 height: 200px;
12 background-color: red;
13 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>实现元素水平垂直居中</title> 6 <style> 7 /*第一种方式：子元素绝对定位+margin: auto 8 父元素设置为相对定位，子元素设置为绝对定位，并且子元素的上下左右的偏移都是0， 9 子元素的margin设置为auto 10 */ 11 /*.parent_box{*/ 12 /* 400px;*/ 13 /* height: 400px;*/ 14 /* background-color: lightseagreen;*/ 15 /* position: relative;*/ 16 /*}*/ 17 /*.child_box{*/ 18 /* 200px;*/ 19 /* height: 200px;*/ 20 /* background-color: red;*/ 21 /* position: absolute;*/ 22 /* top: 0;*/ 23 /* bottom: 0;*/ 24 /* left: 0;*/ 25 /* right: 0;*/ 26 /* margin: auto;*/ 27 /*}*/ 28 29 /*第二种方式：子元素绝对定位+margin左上负偏移自身的一半 30 父元素设置为相对定位，子元素设置为绝对定位，并且子元素的上左的偏移都是50%， 31 再将子元素的margin-left和margin-top负偏移为自身的一半 32 */ 33 /*.parent_box{*/ 34 /* 400px;*/ 35 /* height: 400px;*/ 36 /* background-color: lightseagreen;*/ 37 /* position: relative;*/ 38 /*}*/ 39 /*.child_box{*/ 40 /* 200px;*/ 41 /* height: 200px;*/ 42 /* background-color: red;*/ 43 /* position: absolute;*/ 44 /* top: 50%;*/ 45 /* left: 50%;*/ 46 /* margin-left: -100px;*/ 47 /* margin-top: -100px;*/ 48 /*}*/ 49 50 /*第三种方式：子元素绝对定位+transform:translate左上负偏移自身的一半 51 父元素设置为相对定位，子元素设置为绝对定位，并且子元素的上左的偏移都是50%， 52 然后设置transform: translate(-50%,-50%) 来左上负偏移自身的一半 53 */ 54 /*.parent_box{*/ 55 /* 400px;*/ 56 /* height: 400px;*/ 57 /* background-color: lightseagreen;*/ 58 /* position: relative;*/ 59 /*}*/ 60 /*.child_box{*/ 61 /* 200px;*/ 62 /* height: 200px;*/ 63 /* background-color: red;*/ 64 /* position: absolute;*/ 65 /* top: 50%;*/ 66 /* left: 50%;*/ 67 /* transform: translate(-50%,-50%);*/ 68 /*}*/ 69 70 /*第四种方式：弹性盒子 71 将父元素设置成弹性盒子，然后将弹性盒子的水平排列方式（justify-content）和垂直排列方式（align-items）都设置为center即可 72 */ 73 .parent_box{ 74 width: 400px; 75 height: 400px; 76 background-color: lightseagreen; 77 display: flex; 78 justify-content: center; 79 align-items: center; 80 } 81 .child_box{ 82 width: 200px; 83 height: 200px; 84 background-color: red; 85 } 86 </style> 87 </head> 88 <body> 89 <div class="parent_box"> 90 <div class="child_box"></div> 91 </div> 92 </body> 93 </html>