水平居中
1.平居中設定-定寬塊狀元素
當被設定元素為 塊狀元素 時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
這一小節我們先來講一講定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width為固定值。)
滿足定寬和塊狀兩個條件的元素是可以通過設定「左右margin」值為「auto」來實現居中的。我們來看個例子就是設定 div 這個塊狀元素水平居中：
html**：
divstyle>
我是定寬塊狀元素，哈哈，我要水平居中顯示。div>
body>
也可以寫成：
margin-left:auto;
margin-right:auto;
在實際工作中我們會遇到需要為「不定寬度的塊狀元素」設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
加入 table 標籤
設定 display: inline 方法：與第一種類似，顯示型別設為 行內元素，進行不定寬元素的屬性設定
設定 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的
這一小節我們來講一下第一種方法：
為什麼選擇方法一加入table標籤? 是利用table標籤的長度自適應性—即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
第一步：為需要設定的居中的元素外面加入乙個 table 標籤 ( 包括 、、 )。
第二步：為這個 table 設定「左右 margin 居中」（這個和定寬塊狀元素的方法一樣）。
舉例如下：
html**：
我是第一行文字li>
我是第二行文字li>
我是第三行文字li>
ul>
td>
tr>
tbody>
table>
div>
css**：
table
style>
第2種實現這種效果的方法，改變元素的display型別為行內元素，利用其屬性直接設定。
第二種方法：改變塊級元素的 display 為 inline 型別（設定為 行內元素 顯示），然後使用 text-align:center 來實現居中效果。如下例子：
html**：
class="container">
href="#">1a>
li>
href="#">2a>
li>
href="#">3a>
li>
ul>
div>
body>
css**：
.container
/* margin:0;padding:0（消除文字與div邊框之間的間隙）*/
.container
ul/* margin-right:8px（設定li文字之間的間隔）*/
.container
listyle>
4.水平居中總結-不定寬塊狀元素方法（三）
方法三：通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css**是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css**則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。
**如下：
class="container">
href="#">1a>
li>
href="#">2a>
li>
href="#">3a>
li>
ul>
div>
body>
css**：
.container
.container
ul.container
listyle>
1.垂直居中-父元素高度確定的單行文字（一）
父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文字中，行與行之間的 基線間的距離 )。
line-height 與 font-size 的計算值之差，在 css 中成為「行間距」。分為兩半，分別加到乙個文字行內容的頂部和底部。
這種文字行高與塊高一致帶來了乙個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。
如下**：
class="container">
hi,imooc!
div>
css**：
.container
style>
在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell（設定為**單元顯示），啟用 vertical-align 屬性，但注意 ie6、7 並不支援這個樣式, 相容性比較差。
在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell（設定為**單元顯示），啟用 vertical-align 屬性，但注意 ie6、7 並不支援這個樣式, 相容性比較差。
html**：
class="container">
看我是否可以居中。p>
看我是否可以居中。p>
看我是否可以居中。p>
div>
div>
css**：
.container
style>
3.隱性改變display型別
有乙個有趣的現象就是當為元素（不論之前是什麼型別元素，display:none 除外）設定以下 2 個句之一：
1. position : absolute
2.float : left 或 float:right
如下面的**，小夥伴們都知道 a 標籤是 行內元素 ，所以設定它的 width 是 沒有效果的，但是設定為 position:absolute 以後，就可以了。
class="container">
href="#"
title="">進入課程請單擊這裡a>
div>
css**
.container
astyle>
水平居中和垂直居中的設定
如何讓元素在父元素中水平或垂直居中 行內元素 text align center line height height 塊級元素 1.給父元素設定display flex伸縮盒布局 並且設定 align items center justify content center 2.給父元素乙個定位屬性...
水平居中和垂直居中
行內元素 為該行內元素的父元素新增設定text align center 塊級元素 為其自身設定margin auto樣式 子元素是行內元素 設定父元素的line height為其自身盒子的高度 子元素是塊級元素但子元素高度沒有設定 設定父元素是 display table cell vertica...
垂直居中和水平居中總結
container center 以上 可使塊級子元素水平垂直居中，為inline block的子元素只能垂直居中，若也想其水平垂直居中確保在父元素樣式中新增 text align center。關鍵必須設定其父元素固定寬高。即使有多個子元素也一樣可以垂直水平居中。當子元素都為行內元素 行內元素不能...