想要实现页面中垂直水平居中：
使用flex布局：
.test {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 400px;
}
<div class="test">
<p>dddd</p>
<p>kkkkkk</p>
<h3>llllll</h3>
</div>
flex-direction属性决定主轴的方向（即项目的排列方向）。
默认是row，表示items水平排列
因此要使项目垂直排列需设置flex-direction: column;
此时justify-content: center;表示垂直方向上的居中
align-items: center;表示水平方向上的居中
垂直方向上的居中父元素需要有高度
flex常见属性
1.justify-content
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
image.png
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
2.align-items
align-items属性定义了项目在交叉轴上的对齐方式。
注意：
使用flex会使子元素的float 、 clear 和 vertical-align 属性失效。因此，使用了flex布局，就不要用浮动
常见布局
1.元素a在最左，元素b在最右
想要实现float布局能实现的样式，例如元素a在最左，元素b在最右
可以
display: flex;
justify-content: space-between;
2.元素均分一行
实现元素均分一行：
display: flex;
justify-content: space-between;
使用space-between、space-around看具体场景
3.元素a在中间，元素b在最右
这种情况不太推荐用flex布局，如果非要用flex：
在最左侧加一个区块，形成结构 与箭头等宽块---标题----箭头， 这样可以解决问题，有点不太优雅。
推荐使用：
采用绝对定位：箭头使用绝对定位，标题水平居中即可（text-align:center）
参考：
Flex 布局教程：语法篇
