44年前我们成功让人登陆月球，但现在仍无法用CSS把内容居中 -- James Anderson
1.作者在书中讲解了两大类
绝对定位解法
FlexBox解法
因为以前在博客已经写过一篇文章，所以不介绍其方法了。大家可以看一下我的博文
关于作者推荐的flexbox--流布局。作者广泛使用了其方法，是值得大力推荐的
流布局，就像BootStrap的栅格布局一样实用
在我接触之后，我完全抛弃了float这个属性（除了在圣杯布局和双飞翼布局中罕见的用到）
这个属性真的推荐使用！！
下面这个链接是关于阮一峰对流布局的介绍，
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
小测试
这里只用flex做演示，希望大家以后多用这种方法
html
<div class="parent">
<div class="child">
I am child
</div>
</div>
css
我们需要给容器设定一个高度，并设置为
display:flex
在子元素中设置，这里不仅会左右居中，还会上下居中
margin:auto
完整的css代码
.parent{
width: 400px;
height: 200px;
display: flex;
background: tan;
}
.child{
margin: auto;
width: 200px;
background: yellowgreen;
padding: 1em;
}
效果图如下：
用flex布局垂直居中