css使用flexbox處理垂直居中的版面

使用flexbox處理垂直居中，最快速簡便的模式只要在上層使用display:flex，要置中的子項目加上margin:auto即可

css部分

html,body{
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
}
.wrapper{
	width:100%;
	height:100%;
	display: flex; // 在上層使用flex
	background: pink;
}

.child{
	width: 300px;
	height: 300px;
	background: blue;
	margin: auto; // 要置中的子項目樣式加上margin:auto即可
	display: flex; // 在上層使用flex
}

.child p{
	color: #fff;
	margin: auto; // 要置中的子項目樣式加上margin:auto即可
}

html部分

<span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"wrapper"</span><span class="tag">&gt;</span><span class="pln">
	</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"child"</span><span class="tag">&gt;</span><span class="pln">
		</span><span class="tag">&lt;p&gt;</span><span class="pln">上下左右置中的內容</span><span class="tag">&lt;/p&gt;</span><span class="pln">
	</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span>

呈現的結果