css 几种水平垂直居中的方法 及 弹性盒子

1. margin ：auto 方法
   ==================

   给 要居中的元素 设置 margin ：auto
   绝对定位 position :absolute;
   top:0;bottom:0;left: 0px;right: 0px;

   父元素要设置相对定位

2. 负 margin 的方法

---

绝对定位 position :absolute;
top:50%； left: 50%px;
margin-top:-高度的一般;
margin-left:负宽度的一半

3. 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: 交叉轴的对齐方式（默认纵轴—垂直）