css垂直水平居中、flex布局

想要实现页面中垂直水平居中：

使用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 布局教程：语法篇