练习题4_垂直水平居中.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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: 400px;
  10. height: 400px;
  11. border:1px dashed black;
  12. float: left;
  13. margin-left: 50px;
  14. margin-top: 50px;
  15. text-align: center;
  16. line-height: 400px;
  17. /* position: relative; */
  18. /* display: flex;
  19. justify-content: center;
  20. align-items: center; */
  21. }
  22. .div1{
  23. width: 100px;
  24. height: 100px;
  25. background-color: red;
  26. /* position: absolute;
  27. top: 50%;
  28. left: 50%; */
  29. /* margin-top: -50px;
  30. margin-left: -50px; */
  31. /* transform: translate(-50%,-50%); */
  32. }
  33. span{
  34. background-color: red;
  35. color: #fff;
  36. /* position: absolute;
  37. top: 50%;
  38. left: 50%;
  39. transform: translate(-50%,-50%); */
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div class="box">
  45. <div class="div1"></div>
  46. </div>
  47. <div class="box">
  48. <span>hello</span>
  49. </div>
  50. </body>
  51. </html>