水平且垂直居中
.box{
border: 1px solid red;
height: 100vh; /* viewpoint height 视点高度*/
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
Flex（Flexible Box，弹性布局），用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
关于flex的兼容
webkit 内核的浏览器（如Safari）和 IE10 及以下的浏览器兼容方法：
.box{
display: -webkit-flex; /* Safari */
display: -ms-flexbox; /*ie 10*/
display: flex;
}
6个属性简介：
flex-direction 容器内项目的排列方向，默认横向排row(从左到右)，可以设置成纵向排column(从上倒下)，
“row-reverse、cloumn-reverse”分别表示从右到左、从下到上。
flex-wrap 容器内项目换行方式默认不换行 nowrap、换行wrap(第一行上方)和wrap-reverse(第一行下方)
flex-flow 以上两个属性的简写方式，默认值为 row nowrap。
justify-content 项目在主轴上的对齐方式 右对齐 flex-end， 居中 center，两端对齐 space-between，
每个项目两侧的间隔相等 space-around。
align-items 项目在交叉轴上对齐方式 起点对齐 flex-start，终点对齐 flex-end，中点对齐 center， 第一行
文字的基线对齐 baseline，默认 stretch (项目未设置高度或设为auto，将占满整个容器的高度)
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
起点对齐 flex-start，终点对齐 flex-end，中点对齐 center，
上下对齐 space-between，每个项目两侧的间隔相等space-around 。
6个属性例子：
#linghuohezi {
border: 3px solid green;
width: 300px;
height: 300px;
display: flex;
}
（盒子1234各设了100px边长）
①flex-direction 容器内项目的排列方向
1.默认 从左到右 row
2.从上到下 column
②flex-wrap 容器内项目换行方式
1.默认 不换行 nowrap
2.换行 wrap
#linghuohezi{
flex-wrap:wrap;
}
2.反向换行 wrap-reverse
#linghuohezi{
flex-wrap:wrap-reverse;
}
③flex-flow 是flex-derection 和 flex-wrap的简写方式
默认 从左到右 不换行 row nowrap
#linghuohezi{
flex-flow:row nowrap
}
④justify-content 项目在主轴上的对齐方式
（便于观察 父容器边长改为 600px）
1.默认 左对齐 flex-start
#linghuohezi{
#linghuohezi{
justify-content:flex-end
}
2.右对齐 flex-end
#linghuohezi{
justify-content:flex-end
}
3.居中 center
#linghuohezi{
justify-content:center
}
4.两端对齐 space-between
（项目之间的间隔均相等)
#linghuohezi{
justify-content:space-between
}
5.每个项目两侧的间隔均相等 space-around
（项目之间的间隔比项目与边框的间隔大一倍）
#linghuohezi{
justify-content:space-around
}
⑤align-items 项目在交叉轴上的对齐方式
1.默认 上对齐 flex-start
2.下对齐 flex-end
#linghuohezi{
align-items:flex-end
}
3.居中 center
#linghuohezi{
align-items：center
}
4.第一行文字基线对齐 baseline
（设置1234盒子 边长为 50px，100px，200px，400px，字体为 40px，50px，20px，80px）
#linghuohezi{
align-items：baseline
}
5.拉伸充满 stretch （1234盒子无高度设置时）
#linghuohezi{
align-items:stretch
}
⑥align-content 多行项目在交叉轴上的对齐方式
align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），
默认 充满拉伸 stretch，起点对齐 flex-start，终点对齐 flex-end，中点对齐 center，
上下对齐 space-between，每个项目两侧的间隔相等space-around 。