flex布局实现元素的垂直居中

转载：[转载自这里](https://blog.csdn.net/amberqu/article/details/79700974)

转

Flex实现元素的水平居中和垂直居中

2018年03月26日 17:20:41 AmberQu 阅读数 16299

flex容器内子元素的float、clear和vertical-align属性将失效，所有子元素自动成为容器成员flex item，即“项目”。

水平居中

justify-content属性定义了项目在主轴（水平）上的对齐方式。

justify-content可取值：

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等（类似margin-left = margin-right）。所以，项目之间的间隔比项目与边框的间隔大一倍。