Flex弹性布局以及CSS3中的垂直居中

Flex意为“弹性布局”，其定义方式如下：

.box{
    display:flex;         //普通元素
}
.box2{
    display:inline-flex;  //行内元素
}
.box3{
    display:-webkit-flex; //webkit内核的浏览器
}

当定义好Flex布局后，布局中的元素将被如下图规划。

Flex布局中的规划

能够对当前div（.box）设置的属性有以下六个
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
分别介绍各个属性的用途。

flex-direction 用于决定主轴的方向

flex-direction: row | row-reverse | column | column-reverse
//分别为 水平方向 左起点(default) | 水平方向 右起点 | 水平方向 右起点 | 垂直方向 下起点

flex-wrap 用于定义换行方式

flex-wrap: nowrap | wrap | wrap-reverse;
//分别为 不换行 | 换行 第一行在顶端 | 换行 第一行在底部

justify-content 用于定义主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;
//和主轴方向有关，本例假设主轴从左到右
//左对齐(default) | 右对齐 | 居中 | 两段对齐 | 每个项目两侧间距相等

主轴对齐方式图例

align-items 用于定义在交叉轴上如何对齐

align-items: flex-start | flex-end | center | baseline | stretch;
//起点对齐 | 终点对齐 | 居中对齐 | 各项目首行文字对齐 | 若未设置高度或auto则占满整个容器(default)

align-content 用于定义多轴线的对齐方式 若仅有一根轴线 则不起作用

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

利用Flex布局实现水平垂直居中的代码
注：在container中的div将相对于container居中

.container{
    width: 100%;
    height: 600px;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

---

归纳自
菜鸟教程-Flex 布局语法教程
学习CSS布局-flexbox