对于初学CSS的新手来说，想必很多小伙伴都在为如何水平和垂直居中所烦恼过
下面让我给大家分享下自己的经验~
先说说水平居中：
这个还是比较容易的，对于块级元素，只需设置margin-left和margin-right = auto，就解决啦~
对于非块级元素，可能有些小伙伴会设置margin-left：50%，
先来看效果~：
.<style>
warp{width:500px;height:500px;background:#eee;}
. margin-left-50{display: inline-block;background:blue;margin-left: 50%;margin-top: 50%;}
</style>
<div class="warp">
<span class="margin-left-50">水平居中margin-left:50%
</div>
是不是觉得有点跟我们要的效果不一样？并没有水平和垂直居中呀，我也为此困惑过一段时间
后来发现元素其实是以左侧起始线的位置来确定的，又想出一个解决方案：使用margin-left或者margin-top：50%后，应该再减去其自身宽度的一半，也能实现居中啦~
查阅资料，发现Css还有一个高级属性:calc()
浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持
于是就有了margin-left:calc(50% - 5em); 注：中间50% - 6em 中间带有空格，不能缺少，6em是需居中元素宽度的一半（元素宽高度需要自己测算）
元素垂直居中也是一样的用法！
问题解决~
用了一段时间后，总觉得这个用法不是舒适，原因在于他需要对元素确定一个特定的宽度或者高度，始终无法很灵活的实现水平或垂直居中
=======================================================黄金分割线=======================================================
接下来引入本章重点！！！—— flex 属性
关于flex，官方定义：flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
重点介绍flex三个最重要也是最常用属性
1.flex-direction 用于指定Flex主轴的方向，继而决定 Flex子项在Flex容器中的位置
取值：row | row-reverse | column | column-reverse
2.justify-content 用于指定主轴(水平方向)上Flex子项的对齐方式
取值：flex-start | flex-end | center | space-between | space-around
flex-start：默认值，表示与行的起始位置对齐
flex-end：表示与行的结束位置对齐
center：表示与行中间对其
space-between：表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start
space-around：表示间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center
justify-content的前三种取值的效果图如下：
3.lign-items 用于指定侧轴(垂直方向)上Flex子项的对齐方式
取值：stretch | flex-start | flex-end | center | baseline
stretch：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。这里需要注意，在只有一行的情况下，行的高度为容器的高度，即Flex子项高度为容器的高度
flex-start：表示与侧轴开始位置对齐
flex-end：表示与侧轴的结束位置对齐
center：表示与侧轴中间对其
baseline：表示基线对齐，当行内轴与侧轴在同一线上，即所有Flex子项的基线在同一线上时，效果等同于flex-start
看到这，小伙伴们是不是发现利用 flex 的水平居中原来这么简单！
于是我们利用flex属性把刚刚测试代码改为如下：
<style>
.warp{width:500px;height:500px;background:#eee;display:flex;flex-direction:row;align-items:center;justify-content:center;}
.margin-left-50{background:blue;}
</style>
<div class="warp">
<span class="margin-left-50">水平居中margin-left:50%
</div>
再看看效果~
是不是成功了呢，垂直水平居中，而且不受子元素的内容大小或父级元素的大小所影响。实现了真正意义上的居中！
注：部分图片取自简书 https://www.jianshu.com/p/967dcacf0220
并附上 flex 菜鸟教程链接~http://www.runoob.com/cssref/css3-pr-flex.html 更多flex属性请查阅CSS3官方文档
首次发帖，欢迎留言，关注！
