44年前我们成功让人登陆月球，但现在仍无法用CSS把内容居中 -- James Anderson

1.作者在书中讲解了两大类
绝对定位解法
FlexBox解法

因为以前在博客已经写过一篇文章，所以不介绍其方法了。大家可以看一下我的博文

http://blog.csdn.net/smilebzj/article/details/50914407

关于作者推荐的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布局垂直居中