一.水平居中
（1）行內(nèi)元素解決方案：父為塊元素+text-align: center
只需要把行內(nèi)元素包裹在一個屬性display為block的父層元素中帮毁，并且把父層元素添加如下屬性即可：使用text-align: center;居中
對于行內(nèi)元素或具有inline-block屬性的元素居中铭乾，比如span、img等可以使用text-align: center;來實現(xiàn)烈涮。
<style type="text/css">
div.parent{
border: 1px solid red;
text-align: center;
}
div span {
width: 100px;
background: #ddd;
}
</style>
-----------------------------------
<div class="parent">
<span>行內(nèi)元素居中</span>
<span>行內(nèi)元素居中</span>
<span>行內(nèi)元素居中</span>
</div>
（2）單個塊狀元素解決方案
父層元素使用text-align: center居中,子層元素使用 margin: 10px auto; 10px可改變朴肺，以設(shè)置頂端外邊距；
<style type="text/css">
div.parent {
border: 1px solid red;
text-align: center;
}
div p{
width: 100px;
background: #ddd;
/* 這里可以設(shè)置頂端外邊距 */
margin: 10px auto;
}
</style>
-----
<div class="parent">
<p>塊元素居中</p>
</div>
（3）多個塊狀元素解決方案
將元素的display屬性設(shè)置為inline-block坚洽，并且把父元素設(shè)置text-align：center即可:
<style type="text/css">
div.parent {
border: 1px solid red;
text-align: center;
}
div p{
display: inline-block;
width: 100px;
background: #ddd;
}
</style>
<div class="parent">
<p>塊元素居中</p>
<p>塊元素居中</p>
<p>塊元素居中</p>
</div>
（4）多個塊狀元素解決方案 (使用flexbox布局實現(xiàn))
使用flexbox布局戈稿，只需要把待處理的塊狀元素的父元素添加屬性display:flex及justify-content:center即可:
<style>
div {
border: 1px solid red;
width: 200px;
height: 200px;
/*flex*/
display: flex;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
}
div span{
background: #808080;
}
</style>
<div>
<span>我是span元素</span>
</div>
二、垂直居中
（1）單行的行內(nèi)元素解決方案 ：行內(nèi)元素的height和line-height設(shè)置的和父元素一樣高度即可實現(xiàn)垂直居中
div.parent {
background: #222;
height: 200px;
}
/* 以下代碼中酪术，將a元素的height和line-height設(shè)置的和父元素一樣高度即可實現(xiàn)垂直居中 */
a {
height: 200px;
line-height:200px;
color: #FFF;
}
--------------------
<div class="parent">
<a>我是a元素</a>
</div>
（2）多行的行內(nèi)元素解決方案
組合使用display:table-cell和vertical-align:middle屬性來定義需要居中的元素的父容器元素生成效果器瘪，如下：
<style type="text/css">
div.center-aligned {
border:1px solid red;
width: 200px;
height: 200px;
display: table;/*父容器使用display：table*/
}
div.center-core{
display: table-cell;/*包裹行內(nèi)元素容器使用display：table-cell*/
text-align: center;/*水平居中*/
vertical-align: middle;/*垂直居中*/
}
span{
background: #ddd;
}
</style>
-----------
<div class="center-aligned">
<div class="center-core">
<span>我是span元素</span>
<span>我是span元素</span>
</div>
</div>
（3）已知高度的塊狀元素解決方案:負(fù)margin和定位配合
好處是行內(nèi)元素和塊級元素都適用,但是需要知道元素本身的寬高度。
<style>
div {
border: 1px solid red;
width: 200px;
height: 200px;
text-align: center;
position: relative;
}
div span {
width: 150px;
height: 50px;
background: #808080;
position: absolute;
margin: auto;
left: 50%;
top: 50%;
margin-left: -75px;/*-自身width/2*/
margin-top: -25px;/*-自身height/2*/
}
</style>
------------
<div>
<span>我是span元素</span>
</div>
三.水平垂直居中
（1）已知高度和寬度的元素解決方案1：margin-auto和定位的組合使用
這是一種不常見的居中方法绘雁，可自適應(yīng)橡疼，比方案2更智能，如下：
<style>
div {
border: 1px solid red;
width: 200px;
height: 200px;
position: relative;
}
div span {
width: 150px;
height: 50px;
background: #808080;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
---------------
<div>
<span>我是span元素</span>
</div>
（2）已知高度和寬度的元素解決方案2：負(fù)margin和定位配合
position 元素已知寬度 父元素設(shè)置為：position: relative; 子元素設(shè)置為：position: absolute; 距上50%庐舟，據(jù)左50% 欣除；margin-left: -自身width/2
margin-top: -自身height/2
<style>
div {
border: 1px solid red;
width: 200px;
height: 200px;
text-align: center;
position: relative;
}
div span {
width: 150px;
height: 50px;
background: #808080;
position: absolute;
margin: auto;
left: 50%;
top: 50%;
margin-left: -75px;/*-自身width/2*/
margin-top: -25px;/*-自身height/2*/
}
</style>
------------
<div>
<span>我是span元素</span>
</div>
（3）未知高度和寬度元素解決方案：使用translate居中
這種方法實現(xiàn)原理和負(fù)margin和定位的組合使用是一樣的，
就是用css3的屬性translate來達(dá)到和負(fù)margin一樣的作用挪略。
translate是transform的一個值历帚，在這里作用是定義2D轉(zhuǎn)換。
但是在IE9以下不支持
<style type="text/css">
div {
border: 1px solid red;
width: 200px;
height: 200px;
position: relative;
}
div span {
width: 150px;
height: 50px;
background: #ddd;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
---------------
<div>
<span>行內(nèi)元素居中</span>
</div>
（4）使用flex布局實現(xiàn)：使用flex居中不需要知道元素本身寬高以及元素的屬性
<style>
div {
border: 1px solid red;
width: 200px;
/* 注意這里需要設(shè)置高度來查看垂直居中效果 */
height: 200px;
/*flex*/
display: flex;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
}
div span{
background: #808080;
}
</style>
-----
<div>
<span>我是span元素</span>
</div>
（5）calc和定位的組合使用
calc是英文單詞calculate(計算)的縮寫杠娱，是css3的一個新增的功能挽牢，可以使用calc()給元素的border、margin摊求、pading禽拔、font-size和width等屬性設(shè)置動態(tài)值。
calc使元素居中的原理和負(fù)margin是一樣的，calc 允許基于當(dāng)前的頁面布局計算尺寸睹栖。
計算公式為：
top: calc(50% - (自身高度height/ 2));
left: calc(50% - (自身高度寬度 / 2));
<style type="text/css">
div {
border: 1px solid red;
width: 200px;
height: 200px;
position: relative;
}
div span {
width: 150px;
height: 50px;
background: #ddd;
position: absolute;
top: calc(50% - (50px / 2));
left: calc(50% - (150px / 2));
</style>
--
<div>
<span>行內(nèi)元素居中</span>
</div>
