显示全屏,内容上下居中

关键: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="width:200px;height:200px;border:5px solid red;">hhyhyh</div>
22 </div>
23 </body>
24 </html>
index.html

 

预览地址:

https://besswang.github.io/flex_center_center/index.html

posted @ 2017-04-07 16:18  最爱小虾  阅读(368)  评论(0)  编辑  收藏  举报