将一个div水平垂直居中

flex布局

一、简介

flex布局，可简便、完整、响应式地实现各种页面布局，设为flex布局后，子元素的float、clear和vertical-align属性将失效。

二、flex相关容器图例

与flex相关的容器属性有6个，分别例如下图：

布局样式图，如下：

三、flex布局属性详解

1) flex-direction:

flex-direction: row | row-reverse | column | column-reverse;
flex-direction属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。

2) flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse;
flex-wrap属性可选值的范围为nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse（你懂的~）

3) flex-flow
flex-flow: <flex-direction> || <flex-wrap>;
写法属性中，将上述两种方法的值用||连接即可

4) justify-content
justify-content: flex-start | flex-end | center | space-between | space-around;
项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置了)

flex-start：在主轴上由左或者上开始排列

flex-end：在主轴上由右或者下开始排列

center：在主轴上居中排列

space-between：在主轴上左右两端或者上下两端开始排列

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5) align-items
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

给容器添加flex-direction属性，可让其内容子元素排列顺序为水平或垂直
display:flex; 使用容器；
flex-direction:column; 容器内垂直排列
另外还可取值为：row，row-reverse，column-reverse等。

display:flex; 使用容器；
flex-wrap:wrap； 容器内水平排列，支持换行
最后以上两个属性简写方式：
flex-flow: flex-direction | flex-wrap | initial | inherit;flex-direction | flex-wrap | initial | inherit;;

css不定宽高水平垂直居中
.box{

height:600px;
display:flex;
justify-content:center;
align-items:center;
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
background: green;
width: 200px;
height: 200px;
}

水平居中
justify-content常用来设置水平方向对齐方式
justify-content:center;  -->居中
justify-content：space-between;   -->第一个子元素放在开始端，最后一个在最末端，其他平分剩余空间。
justify-content：space-around;   -->第一个和最后一个子元素剩余空间是其他一半，其他平分剩余空间。

垂直居中
align-items常用来设置垂直方向对齐方式
align-items: center;  -->常用设置居中

align-content 注：多行才有效果
align-content: space-between;  -->第一个子元素在开始端，最后一个在末端，其他平均分配其余空间
align-content: space-around;  -->第一个和最后一个子元素剩余空间是其他一半，其他平分剩余空间
align-content: stretch;  -->元素被拉伸以适应容器。没有设定height和width，则平均分配。有height和width则剩余空间放在容器末端