margin ：auto 方法
==================
给 要居中的元素 设置 margin ：auto
绝对定位 position :absolute;
top:0;bottom:0;left: 0px;right: 0px;
父元素要设置相对定位
负 margin 的方法
绝对定位 position :absolute;
top:50%； left: 50%px;
margin-top:-高度的一般;
margin-left:负宽度的一半
display ：table-cell 法
这个方法主要对父元素设置的比较多父元素: display ：table-cell;vertical-align:middle;text-align:center;要居中的元素: vertical-align:middle;
4.弹性盒子法 display :flex;
(1)这个对父元素设置css就可以了
display :flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content:center ;
(2)父元素设置display :flex;子元素设置margin：auto
父元素 {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
要居中的元素 {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
弹性盒子
弹性盒子设置
display: -webkit-flex;
display: flex;
如果父元素设置了display 属性的值为 flex ，如果子元素未设置宽度，那么所有子元素的宽度都是一样的宽度
1.给body 设置 direction: rtl;
direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变
2.flex-direction 顺序指定了弹性子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
#flex
flex布局
一、flex和align-items
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
align-items: center;
}
二、flex、flex-direction: column和justify-content: center;
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
}
#child {
width: 300px;
height: 100px;
background: #08BC67;
line-height: 100px;
}
flex-direction: 主轴的排列方向（默认横轴 flex-direction: row)
justify-content: 主轴的对齐方式 （默认横轴对齐方式–水平)
align-items: 交叉轴的对齐方式（默认纵轴—垂直）
