彈性盒子

設定彈性容器的
主軸對齊屬性：justify-content:center
交叉軸的對其屬性：align-items:center

.perent{
		 	position: absolute;
			display: flex;
			display: -webkit-flex;
		            width: 500px;
		            height:500px;
		            justify-content: center;
		            align-items: center;
		            background: green;
		            flex-direction: row-reverse; 
		            flex-wrap: wrap;
		            justify-content: center;
		            align-items: center;
		}
		.left,.right{

		           flex:1 1 200px;
		           width: 100px;
		           height: 100px;
		           background: red;
		}
		.middle{
			flex-grow: 1;
			height: 100px;
			background: blue;
		} 
 

position:absolute

設定父元素position:absolute或者relative;
設定該元素：position:absolute;
left:50%;
right:50%;
margin-left:-該元素的邊長0.5倍
margin-top：-該元素的邊長0.5倍

.con{
			position: absolute;
			width: 200px;
			height: 200px;
			bottom: 0;
			background: green;
		}
		.middle{
			width: 100px;
			height: 100px;
			background: blue;
			position: absolute;
			left:50%;
			top:50%;
			margin-left: -50px;
			margin-top: -50px; 
		} 
 

fixed+margin:auto

設定要對齊的元素的
position:fixed;
left:0;
right:0;
top:0;
bottom: 0;
margin: auto;

.middle{
			/*flex-grow: 1;*/
			width: 100px;
			height: 100px;
			background: blue;
			position: fixed;
			left:0;
			right:0;
			top:0;
			bottom: 0;
			margin: auto;
			} 

彈性盒子與其他傳統的對比：

引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。