关键:vh; flex;
首先,必然定义的container是父级盒子;
display:flex;
flex-direction:column; /*垂直显示*/
justify-content:center; /*盒子在主轴的中心,要理解,{flex-direction:column;}的时候主轴是垂直的,就是上下居中的状态,如果{flex-direction:row;}的时候主轴就是水平的,就是左右居中*/
align-items:center; /*定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式:项目位于容器的中心*/
1 <!DOCTYPE html> 2 <html lang="zh-Hans"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title></title> 8 <style> 9 .container { 10 height: 100vh; /* 100vh = viewport height*/ 11 display: flex; 12 flex-direction: column;/*属性规定灵活项目的方向:灵活的项目将垂直显示，正如一个列一样。*/ 13 justify-content: center;/*justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式:项目位于容器的中心。*/ 14 align-items: center;/*align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式:项目位于容器的中心。*/ 15 } 16 </style> 17 </head> 18 19 <body> 20 <div class="container"> 21 <div style="200px;height:200px;border:5px solid red;">hhyhyh</div> 22 </div> 23 </body> 24 </html>
预览地址:
https://besswang.github.io/flex_center_center/index.html