1、水平居中
margin實現水平居中
在分頁容器上定義一個寬度，而後配合margin的左右值爲「auto」實現效果
margin: 0 auto;
優勢：實現方法簡單易懂，瀏覽器兼容性強；
缺點：擴展性差，沒法自適應未知項狀況。
inline-block實現水平居中方法
僅inline-block屬性是沒法讓元素水平居中，他的關鍵之處要在元素的父容器中設置text-align的屬性爲「center」，這樣才能達到效果
.parent{
text-align: center;
}
.children{
display: inline-block;
}
優勢：簡單易懂，擴展性強；
缺點：須要額外處理inline-block的瀏覽器兼容性。
浮動實現水平居中的方法
讓ul爲position:relative;left:50%，再讓li向左浮動，再讓position:relative;right:50%（或者left:-50%)
絕對定位實現水平居中
需求：有時頁面內的一些容器須要定位在特定的某個位置，可是須要容器在水平方向上面居中顯示，好比頁面內的一個背景圖裏面放置一個容器，使用margin-top不方便，就決定使用絕對定位來設置。
實現方法：
方法1、知道容器尺寸的前提下
.element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 寬度的一半 */ }
缺點：該種方法須要提早知道容器的尺寸，不然margin負值沒法進行精確調整，此時須要藉助JS動態獲取。
方法2、容器尺寸未知的前提下，使用CSS3的transform屬性代替margin，transform中的translate偏移的百分比值是相對於自身大小的，設置示例以下：
.element { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 50%爲自身尺寸的一半 */ -webkit-transform: translate(-50%, -50%); }
缺點：兼容性很差，IE10+以及其餘現代瀏覽器才支持。中國盛行的IE8瀏覽器被忽略是有些不適宜的（手機web開發可忽略）。
方法3、margin: auto實現絕對定位元素的居中
.element { width: 600px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 有了這個就自動居中了 */ }
CSS3的flex實現水平居中方法
1.單個元素水平居中：flex彈性佈局justify-content屬性實現元素居中
.parent
display: flex;
justify-content: center;//讓外面的父元素居中，盒子裏面的元素天然就居中了，它的好處是不須要對居中的子元素設置任何樣式，如：width、margin
}
2.多個h1元素水平居中
flex彈性居中
.parent{
display: flex;
}
.children{
flex: 幾份;
}
CSS3的fit-content實現水平居中方法
fit-content是CSS3中給width屬性新加的一個屬性值,它配合margin可讓咱們輕鬆的實現水平居中的效果;一塊兒來看下代碼吧。
在不設置寬度，而且元素中含用float:left狀況下居中
ul{ width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin: auto; }
目前這個屬性只支持Chrome和Firefox瀏覽器
2、垂直居中
1.不知道本身高度和父容器高度的狀況下, 利用絕對定位：
parentElement{ position:relative; } childElement{ position: absolute; top: 50%; transform: translateY(-50%); }
2.若父容器下只有一個元素，且父元素設置了高度，則只須要使用相對定位便可
parentElement{ height:xxx; } .childElement { position: relative; top: 50%; transform: translateY(-50%); }
Flex 佈局：
不考慮兼容老式瀏覽器的話，用Flex佈局簡單直觀一勞永逸：
parentElement{ display:flex;/*Flex佈局*/ display: -webkit-flex; /* Safari */ align-items:center;/*指定垂直居中*/ }
3、水平垂直居中
方案一：
div絕對定位水平垂直居中【margin:auto實現絕對定位元素的居中】，
兼容性：,IE7及以前版本不支持
div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }
方案二：
div絕對定位水平垂直居中【margin 負間距】
div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }
方案三：
div絕對定位水平垂直居中【Transforms 變形】
兼容性：IE8不支持；
div{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父級的50% */ top:50%; transform: translate(-50%,-50%); /*本身的50% */ }
方案四：
css不定寬高水平垂直居中
.box{ height:600px; display:flex; justify-content:center; align-items:center; /* aa只要三句話就能夠實現不定寬高水平垂直居中。 */ } .box>div{ background: green; width: 200px; height: 200px; }
方案五：
將父盒子設置爲table-cell元素，能夠使用text-align:center和vertical-align:middle實現水平、垂直居中。比較完美的解決方案是利用三層結構模擬父子結構
<p class="outerBox tableCell">
<p class="ok">
<p class="innerBox">tableCell</p>
</p>
</p>
/*
table-cell實現居中
將父盒子設置爲table-cell元素，設置
text-align:center,vertical-align: middle;
子盒子設置爲inline-block元素
*/
.tableCell{
display: table;
}
.tableCell .ok{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.tableCell .innerBox{
display: inline-block;
}
方案六：
對子盒子實現絕對定位，利用calc計算位置
<p class="outerBox calc"> <p class="innerBox">calc</p> </p> /*絕對定位，clac計算位置*/ .calc{ position: relative; } .calc .innerBox{ position: absolute; left:-webkit-calc((500px - 200px)/2); top:-webkit-calc((120px - 50px)/2); left:-moz-calc((500px - 200px)/2); top:-moz-calc((120px - 50px)/2); left:calc((500px - 200px)/2); top:calc((120px - 50px)/2); }