[{"data":1,"prerenderedAt":136},["ShallowReactive",2],{"content:\u002F2023\u002Fcss\u002Fvertical-centering-method":3,"surround:\u002F2023\u002Fcss\u002Fvertical-centering-method":125},{"id":4,"title":5,"body":6,"categories":98,"date":101,"description":12,"draft":102,"extension":103,"image":104,"meta":105,"navigation":107,"path":108,"permalink":104,"published":104,"readingTime":109,"recommend":104,"references":114,"seo":118,"sitemap":119,"stem":120,"tags":121,"type":123,"updated":104,"__hash__":124},"content\u002Fposts\u002F2023\u002Fcss\u002Fvertical-centering-method.md","CSS 垂直居中的几种方式",{"type":7,"value":8,"toc":89},"minimark",[9,13,17,20,31,34,40,44,50,53,70,74,80,83],[10,11,12],"p",{},"只提供核心代码，多余代码已被省去。",[14,15,16],"h2",{"id":16},"padding",[10,18,19],{},"适用于 parent 的高度不确定的情况",[21,22,28],"pre",{"className":23,"code":25,"language":26,"meta":27},[24],"language-css",".parent {\n  padding: 20px 0;\n}\n\n.child {}\n","css","",[29,30,25],"code",{"__ignoreMap":27},[14,32,33],{"id":33},"flex",[21,35,38],{"className":36,"code":37,"language":26,"meta":27},[24],".parent {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.child {}\n",[29,39,37],{"__ignoreMap":27},[14,41,43],{"id":42},"absolute-margin-auto","absolute margin auto",[21,45,48],{"className":46,"code":47,"language":26,"meta":27},[24],".parent {\n  position: relative;\n}\n\n.child {\n  position: absolute;\n  margin: auto;\n  width: 300px;\n  height: 200px;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n",[29,49,47],{"__ignoreMap":27},[10,51,52],{},"注意：",[54,55,56,60],"ol",{},[57,58,59],"li",{},"child 的宽高都必须是确定值",[57,61,62,63,66,67],{},"可用 ",[29,64,65],{"code":65},"inset: 0"," 代替 ",[29,68,69],{"code":69},"top: 0; bottom: 0; left: 0; right: 0;",[14,71,73],{"id":72},"absolute-translate","absolute translate",[21,75,78],{"className":76,"code":77,"language":26,"meta":27},[24],".parent {\n  position: relative;\n}\n\n.child {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%,-50%);\n}\n",[29,79,77],{"__ignoreMap":27},[14,81,82],{"id":82},"grid",[21,84,87],{"className":85,"code":86,"language":26,"meta":27},[24],".parent {\n  display: grid;\n}\n\n.child {\n  place-self: center;\n}\n",[29,88,86],{"__ignoreMap":27},{"title":27,"searchDepth":90,"depth":90,"links":91},4,[92,94,95,96,97],{"id":16,"depth":93,"text":16},2,{"id":33,"depth":93,"text":33},{"id":42,"depth":93,"text":43},{"id":72,"depth":93,"text":73},{"id":82,"depth":93,"text":82},[99,100],"学习笔记","CSS","2023-06-27",false,"md",null,{"comments":102,"slots":106},{},true,"\u002F2023\u002Fcss\u002Fvertical-centering-method",{"text":110,"minutes":111,"time":112,"words":113},"1 min read",0.575,34500,115,[115],{"title":116,"link":117},"七种方式实现垂直居中","https:\u002F\u002Fwww.yuque.com\u002Fu202856\u002Fgbe1wh\u002Fdq4yge?",{"title":5,"description":12},{"loc":108},"posts\u002F2023\u002Fcss\u002Fvertical-centering-method",[122,100],"垂直居中","tech","umvE9j7BOuG7p5uA0WWh9b0BLe5HcyUXaAqvVcQjK2M",[126,131],{"title":127,"path":128,"stem":129,"date":130,"type":123,"children":-1},"如何通过接口下载文件","\u002F2023\u002Fhow-to-download-excel","posts\u002F2023\u002Fhow-to-download-excel","2023-06-19",{"title":132,"path":133,"stem":134,"date":135,"type":123,"children":-1},"-webkit-fill-available 关键字","\u002F2023\u002Fcss\u002Fwebkit-fill-available","posts\u002F2023\u002Fcss\u002Fwebkit-fill-available","2023-07-06",1793699837886]