css flex 文字居中,css3 flex 详解,可以实现div内容水平垂直居中

先说一下`flex`一系列属性：

## 一、`flex-direction`: (元素排列方向) ##

※ `flex-direction:row` (横向从左到右排列左对齐)

![在这里插入图片描述][2019120812480797.png]

※ `flex-direction:row-reverse` (与row 相反)

![在这里插入图片描述][20191208124819574.png]

※ `flex-direction:column` (从上往下排列顶对齐)

![在这里插入图片描述][20191208124828409.png]

※ `flex-direction:column-reverse` (与column 相反)

![在这里插入图片描述][20191208124835754.png]

## 二、`flex-wrap`: (内容一行容不下的时候才有效) ##

※ `flex-wrap:nowrap` (超出不换行，很奇怪里面的宽度会变成100%)

![在这里插入图片描述][2019120812530330.png]

※ `flex-wrap:wrap` (超出按父级的高度平分)

![在这里插入图片描述][20191208125309143.png]

※ `flex-wrap:wrap-reverse`(与wrap 相反)

![在这里插入图片描述][20191208125316684.png]

## 三、`justify-content`: (水平对齐方式) ##

※ `flex-start` (水平左对齐)

![在这里插入图片描述][20191208125323342.png]

※ `justify-content:flex-end;` (水平右对齐)

![在这里插入图片描述][20191208125330857.png]

※ `justify-content:center;` (水平居中对齐)

![在这里插入图片描述][20191208125338117.png]

※ `justify-content:space-between;` (两端对齐)

![在这里插入图片描述][20191208125343993.png]

※ `justify-content:space-around;` (两端间距对其)

![在这里插入图片描述][20191208125351553.png]

## 四、`align-items`: (垂直对齐方式) ##

※ `align-items:stretch;` (默认)

![在这里插入图片描述][20191208125400876.png]

※ `align-items:flex-start;` (上对齐，和默认差不多)

![在这里插入图片描述][20191208125411380.png]

※ `align-items:flex-end;` (下对齐)

![在这里插入图片描述][20191208125417790.png]

※ `align-items:center;`(居中对齐)

![在这里插入图片描述][20191208125430674.png]

※ `align-items:baseline;` (基线对齐)

还没搞明白基线对齐是什么意思。

--------------------

以上是对`flex`的简单介绍。下面有个小例子，

大家经常用到的，某个`div`里面水平垂直居中，

![在这里插入图片描述][20191208125221134.png]

1

2

3

4

5

[2019120812480797.png]: /images/20210704/27bcbfca41db475ebf58f63b5fce4fc1.png

[20191208124819574.png]: /images/20210704/78bcaff1df6644c89e6a7e161cd26630.png

[20191208124828409.png]: /images/20210704/9ffb35a4099d412991e95dc03ba57314.png

[20191208124835754.png]: /images/20210704/c8ddf32abd4b4abfa377aa4dbc6f67f8.png

[2019120812530330.png]: /images/20210704/61610bc249bf4ae4b8b59d655d5d8658.png

[20191208125309143.png]: /images/20210704/b14e4dd1a8af427e8e301ae4274bb198.png

[20191208125316684.png]: /images/20210704/dccf926e941c4c65b25135925c1c869e.png

[20191208125323342.png]: /images/20210704/9db355ab9080451486ba0f4f384ba291.png

[20191208125330857.png]: /images/20210704/1bafcd386e7a4b25a127d21e723fb8ac.png

[20191208125338117.png]: /images/20210704/7e9456115500403bbe2df601ab1d9220.png

[20191208125343993.png]: /images/20210704/cec2012f4e3845eaa501c8413a497f2e.png

[20191208125351553.png]: /images/20210704/57f7ed7ce9714c678ac425cb94535dda.png

[20191208125400876.png]: /images/20210704/e6cf6ac569474091a12692ff2f37c40d.png

[20191208125411380.png]: /images/20210704/ccb455bb232345bbbb94568479b5b5f0.png

[20191208125417790.png]: /images/20210704/3800a161329848bc9e497a336e53df77.png

[20191208125430674.png]: /images/20210704/dd0c11c449d34b7495459d932f206b12.png

[20191208125221134.png]: /images/20210704/e46780492e9548d1bd1f584adbbb2ccf.png