.box{  position: relative; }

.box span{

position: absolute;

top:50%;

left:50%;

width:100px;

height: 50px;

margin-left:-50px;    /*负边距为宽度的一半，同下*/

margin-top:-25px;

}

.box span{

position: absolute;

top: 0; left: 0; bottom: 0; right: 0;

width: 50%;

height: 50%;

margin: auto;

}

.box span{

position: absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

.box span{

display: table-cell;

vertical-align: middle;

text-align: center;

}

1、box-orient;——在父元素上设置：horizontal(水平) | vertical(垂直) | inherit;

2、box-flex;——在子元素上设置，子元素元素之间宽度比例，属性值为数字

3、box-align;——在父元素上设置：start | end | center | baseline | stretch;

4、box-direction;——在父元素上设置：reverse(子元素反向排序，如 123，使用属性后为 321)

5、box-flex-group;——在子元素上设置，以组为单位的流体系数(可惜无浏览器支持)

6、box-ordinal-group;——在子元素上设置，规定子元素的排序方式，属性值为数字

7、box-pack;——在父元素上设置：start | end | center | justify(两端对齐，中间等比宽/高)

flex的三种形式：

display: flex;(任何容器)

display: inline-flex;(行内元素)

display: -webkit-flex;(Webkit 内核的浏览器，必须加上-webkit前缀)

 

父元素的属性及值：

1、flex-direction: row | row-reverse | column | column-reverse;

• 决定元素的排列方向

• row（默认值）：主轴为水平方向，起点在左端

• row-reverse：主轴为水平方向，起点在右端

• column：主轴为垂直方向，起点在上沿

• column-reverse：主轴为垂直方向，起点在下沿

2、flex-wrap: nowrap | wrap | wrap-reverse;

• nowrap（默认）：不换行

• wrap：换行，第一行在上方

• wrap-reverse：换行，第一行在下方

3、flex-flow: <flex-direction> || <flex-wrap>;

• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

4、justify-content: flex-start | flex-end | center | space-between | space-around;

• 决定在主轴的对齐方式

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center： 居中

• space-between：两端对齐，元素之间的间隔都相等。

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

5、align-items: flex-start | flex-end | center | baseline | stretch;

• 决定在主轴的交叉轴上的对齐方式<

• flex-start：交叉轴的起点对齐<

• flex-end：交叉轴的终点对齐

• center：交叉轴的中点对齐

• baseline: 项目的第一行文字的基线对齐

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度（即所有元素哪怕里面内容多少不同，其高度也是等高的，对于相同样式的元素，设置其等高很有用）

6、align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• 决定多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

• 属性所有的值的效果与上方的其他属性的值相同

 

子元素的属性及值：

1、order: <number>;

• 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

2、flex-grow: <number>;

• 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

• 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

• 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

3、flex-shrink: <number>;

• 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

• 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小

• 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4、flex-basis: <length> | auto;

• 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

5、align-self: auto | flex-start | flex-end | center | baseline | stretch;

• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

• 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。