水平垂直居中的幾種方式

本文介紹的方法種類不太全，因爲筆者只想分享用過的、通用性高並且簡便易用的。

 第一類：基於 flex 場景

HTML代碼：

	<div class="box blue">
			<div id="mainer" class="yellow element mainer"></div>
	</div>

CSS代碼：

.blue{
    background-color: blue;
}
.yellow{
	background-color: yellow;
}
.element{
	height: 200px;
	width: 200px;
}
.mainer{
}
/*
 * 使用 flex 中 水平軸 和 相對軸 居中的佈局方式實現子文件的水平與垂直居中。
 */
.box{
	height: 600px;
	width: 600px;
	display: flex;
	justify-content: center;
	align-items: center;
}

效果圖如下： 

方便易用，具體實現邏輯可以看我的另一篇文章，介紹小程序包括 flex 佈局的。

第二類： relative 的精準測量

HTML代碼如下：

<div class="box blue">
			<div id="mainer" class="yellow element mainer"></div>
		</div>

CSS代碼如下：

.blue{
	background-color: blue;
}
.yellow{
	background-color: yellow;
}
.element{
	height: 200px;
	width: 200px;
}
/*
 * 關鍵點： 父元素使用 relative + 子元素 absolute 完成基本定位佈局、
 *  + left，top 將子元素移動到居中偏右下的位置，此時子元素位置處於（600/2+200/2,600/2+200/2)，也就是父元素+子元素寬高再除以二的位置。
 *  + transform: translate(-50%,-50%) 將子元素向左向上偏移（200/2,200/2）的距離，到達整個父容器的中點。（初學者會用即可）
 * 此方法適用於 子元素寬高未知的情況下。筆者推崇。
 */
.mainer{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.box{
	height: 600px;
	width: 600px;
	position: relative;
}

關鍵點： 父元素使用 relative + 子元素 absolute 完成基本定位佈局、
+ left，top 將子元素移動到居中偏右下的位置，此時子元素位置處於（600/2+200/2,600/2+200/2)，也就是父元素+子元素寬高再除以二的位置。
+ transform: translate(-50%,-50%) 將子元素向左向上偏移（200/2,200/2）的距離，到達整個父容器的中點。（初學者會用即可）
此方法適用於 子元素寬高未知的情況下。筆者推崇。

第三種：基於 vertical-align 屬性的永久居中

HTML代碼如下：

<div class="container">
    <div class="dialog"></div>
</div>

CSS代碼如下：

.container {
    position: fixed;    
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    white-space: nowrap;
    overflow: auto;
}
.container:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.dialog {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    white-space:normal

這個方法是張鑫旭大神寫的，值得一看。