史上最全垂直居中方法(almost)总结

雨点打透心脏的1/2处 2022-11-25 10:15 179阅读 0赞 
  1. // HTML 结构
  2. <div class="container">
  3.     <div class="center"></div>
  4. </div>
  6. // table法
  7. .container { 
  8.   width: 600px;
  9.   height: 400px;
  10.   background: #eee;
  11.   display: table-cell;
  12.   text-align: center;
  13.   vertical-align: middle;
  14. }
  15. .center { 
  16.   background: tomato;
  17. }
  19. // 绝对定位法+transform（常用）
  20. .container { 
  21.   height: 400px;
  22.   background: #eee;
  23.   position: relative;
  24. }
  25. .center { 
  26.   background: tomato;
  27.   position:absolute;
  28.   top: 50%;
  29.   left: 50%;
  30.   transform: translate(-50%, -50%);
  31. }
  33. // flex 个人常用，有兼容性风险
  34. .container{ 
  35.   height: 400px;
  36.   background: #eee;
  37.   display: flex;
  38.   justify-content: center;
  39.   align-items: center;
  40. }
  41. .center{ 
  42.   width: 100px;
  43.   height: 100px;
  44.   background: tomato;
  45. }
  47. // 绝对定位+margin特性
  48. .container{ 
  49.     width: 400px;
  50.     height: 400px;
  51.     background: gray;
  52.     position: relative;
  53. }
  54. .center { 
  55.     position: absolute;
  56.     height: 200px;
  57.     width: 200px;
  58.     left: 0;
  59.     top: 0;
  60.     bottom: 0;
  61.     right: 0;
  62.     margin: auto;
  63. }
  65. // grid网格法
  66. .container{ 
  67.     display: grid;
  68.     width: 300px;
  69.     grid-template-columns: repeat(3, 100px); 
  70.     grid-template-rows: repeat(3, 100px);
  71.     background: gainsboro;
  72. }
  74. .center { 
  75.     background: tomato;
  76.     grid-column: 2 / 3;
  77.     grid-row: 2 / 2;
  78. }

如果你已经看到这里，那咱们也是有缘人，老衲将收藏多年的最简方法授予你：

  1. .container { 
  2.     height: 400px;
  3.     display: flex;
  4. }
  5. .center { 
  6.     margin: auto;
  7.     width: 100px;
  8.     height: 100px;
  9.     background: tomato;
  10. }

发表评论

表情：
评论列表 （有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ByteBuddy（史上最全）

    ByteBuddy（史上最全） 文章很长，建议收藏起来慢慢读！ [总目录 博客园版][Link 1] 为大家准备了更多的好文章！！！！ 推荐：尼恩Java面试宝典（持

    小鱼儿小鱼儿/ 0 赞/ 189 阅读