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布局垂直居中
