廢話少說，直接上！以下的居中都是不定寬（不定高）的，定寬（定高）的太簡單了沒那麼多時間去整理，這裡就不提了！！！

水平居中：

html結構:（下面所有方案都是用這個結構）

<div class="parent">
    <div class="child">Demo</div>
</div>

方案1：table + margin（IE8以上）

css樣式：

<style>
    .child {
        display: table;
        margin: 0 auto;
      }
</style>

　　/*
        *display: table 在表現上類似 block 元素，但是寬度為內容寬。
        *無需設定父元素樣式 （支援 IE 8 及其以上版本）相容 IE 8 以下版本需要調整為 <table>
    */
 

方案2：inline-block + text-align（無相容性問題）

css樣式：

<style>
    .child {
        display: inline-block;
    }
    .parent {
        text-align: center;
    }
</style>

方案3：absolute + transform（有相容性問題）

css樣式：

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/*
	* 絕對定位脫離文件流，不會對後續元素的佈局造成影響。
	* transform 為 CSS3 屬性，有相容性問題
*/
 

方案4：flex + justify-content（有相容性問題）

css樣式：

<style>
    .parent {
        display: flex;
        justify-content: center;
    }
</style>

/*
	* 只需設定父節點屬性，無需設定子元素
	* flex有相容性問題
*/

垂直居中：

方案1：table-cell + vertical-align（IE8以上）

css樣式：

<style>
    .parent {
        display: table-cell;
        vertical-align: middle;
    }
</style>

	/* 相容性好(IE 8以下版本需要調整頁面結構至 table) */

 

方案2：absolute + transform（有相容性問題、不定高、絕對定位元素是唯一的元素則父元素也會失去高度）

css樣式：

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

/*
	* 絕對定位脫離文件流，不會對後續元素的佈局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。
	* transform 為 CSS3 屬性，有相容性問題
    * 同水平居中，這也可以用margin-top實現，原理水平居中
*/

方案3：flex + align-items（有相容性）

css樣式：

<style>
    .parent {
        display: flex;
        align-items: center;
    }
</style>

綜上，做個總結：

水平垂直居中：

1. absolute + transform（不定寬高、有相容性問題）；

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

/*

	* 絕對定位脫離文件流，不會對後續元素的佈局造成影響。
	* transform 為 CSS3 屬性，有相容性問題

*/

2. inline-block + text-align + table-cell + vertical-align（IE8以上，以下需調整頁面結構為table，不定寬高）；

<style>
    .parent {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .child {
        display: inline-block;
    }
</style>

3. flex + justify-content + align-items（相容性問題、不定寬高）

<style>
    .parent {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /*垂直居中*/
    }
</style>

/*

	* 只需設定父節點屬性，無需設定子元素
	* 蛋疼的相容性問題

*/

好啦，到此結束！