练习5_垂直水平居中.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .box{
  9. width: 200px;
  10. height: 200px;
  11. border: 2px dashed black;
  12. }
  13. .align0{
  14. text-align: center;
  15. line-height: 200px;
  16. }
  17. .box1{
  18. width: 100px;
  19. height: 100px;
  20. background-color: blue;
  21. }
  22. .align1{
  23. position: relative;
  24. }
  25. .box1{
  26. position: absolute;
  27. top: 50%;
  28. left: 50%;
  29. margin-top: -50px;
  30. margin-left: -50px;
  31. }
  32. .align2{
  33. position: relative;
  34. }
  35. .box2{
  36. width: 80px;
  37. background-color: blue;
  38. position: absolute;
  39. top: 50%;
  40. left: 50%;
  41. transform: translate(-50%,-50%);
  42. }
  43. .align3{
  44. display: flex;
  45. align-items: center;
  46. justify-content: center;
  47. }
  48. .box3{
  49. width: 80px;
  50. background-color: blue;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <!-- 单行文本 -->
  56. <div class="box align0">
  57. hello
  58. </div>
  59. <!-- 块元素 已知大小 -->
  60. <div class="box align1">
  61. <div class="box1"></div>
  62. </div>
  63. <!-- 未知大小 -->
  64. <div class="box align2">
  65. <div class="box2">
  66. hello
  67. </div>
  68. </div>
  69. <div class="box align3">
  70. <div class="box3">
  71. hello
  72. </div>
  73. </div>
  74. </body>
  75. </html>