在不知道子元素宽高的情况下，水平垂直居中的六种方式：
在实际使用最好测试下最低版本是否支持对应的实现方式，尽量选各个浏览器支持比较好的，或者最常见的实现方式。
1、弹性盒子布局方式来实现（flex）。
1. <!DOCTYPE html> 2. <html lang="en"> 3. 4. <head> 5. <meta charset="UTF-8"> 6. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8. <title>水平垂直居中</title> 9. </head> 10. <style> 11. html, 12. body { 13. width: 100%; 14. height: 100%; 15. padding: 0; 16. margin: 0; 17. } 18. 19. .box { 20. display: flex; 21. align-items: center; 22. justify-content: center; 23. width: 100%; 24. height: 100%; 25. background: #00affc; 26. } 27. 28. .box1 { 29. background: pink; 30. 31. } 32. </style> 33. 34. <body> 35. <div class="box"> 36. <div class="box1"> 37. 中间盒子水平垂直居中了 38. </div> 39. </div> 40. </body> 41. 42. </html>
浏览器兼容性：
2、绝对定位 + transform
1. <!DOCTYPE html> 2. <html lang="en"> 3. 4. <head> 5. <meta charset="UTF-8"> 6. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8. <title>水平垂直居中</title> 9. </head> 10. <style> 11. html, 12. body { 13. width: 100%; 14. height: 100%; 15. padding: 0; 16. margin: 0; 17. } 18. 19. .box { 20. width: 100%; 21. height: 100%; 22. background: #00affc; 23. } 24. 25. .box1 { 26. background: pink; 27. transform: translate(-50%, -50%); 28. position: absolute; 29. top: 50%; 30. left: 50%; 31. 32. } 33. </style> 34. 35. <body> 36. <div class="box"> 37. <div class="box1"> 38. 中间盒子水平垂直居中了 39. </div> 40. </div> 41. </body> 42. 43. </html>
浏览器兼容性：
3、table标签
1. <!DOCTYPE html> 2. <html lang="en"> 3. 4. <head> 5. <meta charset="UTF-8"> 6. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8. <title>水平垂直居中</title> 9. </head> 10. <style> 11. html, 12. body { 13. width: 100%; 14. height: 100%; 15. padding: 0; 16. margin: 0; 17. } 18. table { 19. width: 100%; 20. height: 100%; 21. } 22. 23. .box { 24. background: #00affc; 25. } 26. 27. .box1 { 28. text-align: center; 29. } 30. </style> 31. 32. <body> 33. <table> 34. <tbody> 35. <tr> 36. <td class="box"> 37. <div class="box1">中间盒子水平垂直居中了</div> 38. </td> 39. </tr> 40. </tbody> 41. </table> 42. </body> 43. 44. </html>
兼容性：基本都支持，只是书写起来比较繁琐，多层嵌套。
4、display：table-cell
1. <!DOCTYPE html> 2. <html lang="en"> 3. 4. <head> 5. <meta charset="UTF-8"> 6. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8. <title>水平垂直居中</title> 9. </head> 10. <style> 11. html, 12. body { 13. width: 100%; 14. height: 100%; 15. padding: 0; 16. margin: 0; 17. } 18. 19. .box { 20. width: 300px; 21. height: 300px; 22. background: red; 23. display: table-cell; 24. text-align: center; 25. vertical-align: middle; 26. } 27. 28. .box1 { 29. display: inline-block; 30. } 31. </style> 32. 33. <body> 34. <div class="box"> 35. <div class="box1">中间盒子水平垂直居中了</div> 36. </div> 37. </body> 38. 39. </html>
浏览器兼容性：主流浏览器基本上都支持的。
5、display: grid
1. <!DOCTYPE html> 2. <html lang="en"> 3. 4. <head> 5. <meta charset="UTF-8"> 6. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8. <title>水平垂直居中</title> 9. </head> 10. <style> 11. html, 12. body, 13. .box { 14. width: 100%; 15. height: 100%; 16. } 17. 18. .box { 19. display: grid; 20. } 21. 22. .box1 { 23. align-self: center; 24. justify-self: center; 25. } 26. </style> 27. 28. <body> 29. <div class="box"> 30. <div class="box1">123123</div> 31. </div> 32. 33. </body> 34. 35. </html>
浏览器兼容性：最新主流浏览器基本上兼容，对于老版本浏览器可能会有兼容性问题。
6、writing-mode 属性
1. <!DOCTYPE html> 2. <html lang="en"> 3. 4. <head> 5. <meta charset="UTF-8"> 6. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8. <title>水平垂直居中</title> 9. </head> 10. <style> 11. html, 12. body, 13. .content { 14. width: 100%; 15. height: 100%; 16. } 17. 18. .content { 19. writing-mode: vertical-lr; 20. text-align: center; 21. } 22. 23. .box { 24. writing-mode: horizontal-tb; 25. display: inline-block; 26. text-align: center; 27. width: 100%; 28. } 29. 30. .box1 { 31. display: inline-block; 32. margin: auto; 33. text-align: left; 34. } 35. </style> 36. 37. <body> 38. <div class="content"> 39. <div class="box"> 40. <div class="box1">123123</div> 41. </div> 42. </div> 43. 44. </body> 45. 46. </html>
浏览器兼容性问题：
