Div水平垂直居中的三种方法
百度了很多种方法，很多是不起作用的。下面这些方法是我亲自试过的。希望对大家有帮助！
下面是一波代码水军。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>设置div水平垂直居中</title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 /*方法一*/ 12 #cell { 13 display: table-cell; 14 vertical-align: middle; 15 height: 400px; 16 width: 400px; 17 background: lightcoral; 18 19 } 20 .content{ 21 margin: 0 auto; 22 height: 200px; 23 width: 200px; 24 background: lightgreen; 25 } 26 /*方法二*/ 27 .outer{ 28 position: relative; 29 width: 500px; 30 height: 400px; 31 background: coral; 32 } 33 .inner{ 34 position: absolute; 35 top:50%; 36 left: 50%; 37 -webkit-transform: translate(-50%, -50%); 38 transform: translate(-50%, -50%); 39 width: 200px; 40 height: 200px; 41 background: yellowgreen; 42 } 43 /*方法三*/ 44 .middle-panel{ 45 height:100px; 46 width:200px; 47 background: peru; 48 } 49 .parent-panel{ 50 width: 400px; 51 height:300px; 52 background: paleturquoise; 53 54 /**主要代码： 55 display: flex是前提 56 align-items设置垂直居中； 57 justify-content设置水平居中*/ 58 display: flex; 59 align-items: center; 60 justify-content: center; 61 } 62 </style> 63 </head> 64 <body> 65 <!--方法一--> 66 <div id="cell"> 67 <div class="content">Content goes here</div> 68 </div> 69 <!--方法二--> 70 <div class="outer"> 71 <div class="inner"></div> 72 </div> 73 <!--方法三--> 74 <div class="parent-panel"> 75 <div class="middle-panel"> 76 </div> 77 </div> 78 </body> 79 </html>
