前言
之前在面试中被问到过这个问题，今天回想起来，就进行了总结，并且展示了具体的代码实现，希望对大家有所帮助！
具体内容
下面列举了几种常用的实现方法：
1、使用"绝对地位" + "margin-left/margin-top"方式来实现
具体代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子元素水平垂直居中于父元素内</title> 6 <style> 7 .parentBox{ 8 width: 300px; 9 height: 300px; 10 background:pink; 11 position: relative; 12 } 13 .childBox{ 14 width:100px; 15 height: 100px; 16 background: #f90; 17 position: absolute; /*绝对地位*/ 18 left:50%; 19 top:50%; 20 margin-left:-50px; /*margin*/ 21 margin-top:-50px; 22 } 23 </style> 24 </head> 25 <body> 26 <!--方法1：使用"绝对地位" + "margin-left/margin-top"方式来实现--> 27 <div class="parentBox"> 28 <div class="childBox"></div> 29 </div> 30 </body> 31 </html>
2、使用"绝对地位" + "CSS3的变形transform:translate()"方式来实现
具体代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子元素水平垂直居中于父元素内</title> 6 <style> 7 .parentBox{ 8 width: 300px; 9 height: 300px; 10 background:pink; 11 position: relative; 12 } 13 .childBox{ 14 width:100px; 15 height: 100px; 16 background: #f90; 17 position: absolute; 18 left: 50%; 19 top:50%; 20 -webkit-transform:translate(-50%,-50%); 21 /* -webkit-transform: translate(-50px,-50px); */ /*CSS3中的变形->位移*/ 22 } 23 </style> 24 </head> 25 <body> 26 <!--方法2：使用"绝对地位" + "CSS3的变形transform:translate()"方式来实现--> 27 <div class="parentBox"> 28 <div class="childBox"></div> 29 </div> 30 </body> 31 </html>
3、在父元素中使用弹性盒子布局来实现(justify-content/align-items)
具体代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子元素水平垂直居中于父元素内</title> 6 <style> 7 .parentBox{ 8 width: 300px; 9 height: 300px; 10 background:pink; 11 display: flex; /*流式布局*/ 12 justify-content: center; /*flex子元素横向排列方式(主轴居中)*/ 13 align-items: center; /*flex子元素在纵向上的排列方式(垂直居中，一般处理单行)*/ 14 /*补充：align-content:center; flex子元素纵向排列方式(一般处理多行)*/ 15 } 16 .childBox{ 17 width:100px; 18 height: 100px; 19 background: #f90; 20 } 21 </style> 22 </head> 23 <body> 24 <!--方法3：在父元素中使用弹性盒子布局来实现(justify-content/align-items)--> 25 <div class="parentBox"> 26 <div class="childBox"></div> 27 </div> 28 </body> 29 </html>
4、在子元素上使用"绝对地位" + "left/right/top/bottom都设置为0" + margin:auto
具体代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子元素水平垂直居中于父元素内</title> 6 <style> 7 .parentBox{ 8 width: 300px; 9 height: 300px; 10 background:pink; 11 position: relative; 12 } 13 .childBox{ 14 width:100px; 15 height: 100px; 16 background: #f90; 17 position: absolute; 18 left: 0; 19 top: 0; 20 right: 0; 21 bottom: 0; 22 margin:auto; 23 } 24 </style> 25 </head> 26 <body> 27 <!--方法4：在子元素上使用"绝对地位" + "left/right/top/bottom都为0" + margin:auto--> 28 <div class="parentBox"> 29 <div class="childBox"></div> 30 </div> 31 </body> 32 </html>
5、给父元素添加伪元素来实现
利用伪元素实现子元素在父元素内水平垂直居中，首先需要在父元素内设置"text-align:center"；垂直方向的居中需要在父元素后面添加一个伪元素，并且设置伪元素的样式为："display:inline-block;height:100%;vertical-align:middle"，高度设置为父元素一样高且垂直居中，即可以理解为子元素相对于伪元素居中，由于伪元素和父元素一样高，所以相当于子元素在父元素里垂直居中。
具体代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子元素水平垂直居中于父元素内</title> 6 <style> 7 .parentBox{ 8 width: 300px; 9 height: 300px; 10 background:pink; 11 text-align: center; 12 } 13 .parentBox:after{ /*在父元素后面添加一个伪元素*/ 14 content:''; 15 display: inline-block; 16 height: 100%; 17 vertical-align: middle; 18 } 19 .childBox{ 20 width:100px; 21 height: 100px; 22 background: #f90; 23 display: inline-block; 24 vertical-align: middle; 25 } 26 </style> 27 </head> 28 <body> 29 <!--方法5：给父元素添加伪元素来实现--> 30 <div class="parentBox"> 31 <div class="childBox"></div> 32 </div> 33 </body> 34 </html>
效果图如下所示：
结束语
此处共总结了5种实现方式，后续有新的方法，会继续更新！