我們在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。
這裡我們又得分兩種情況：行內元素 還是 塊狀元素 ，塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。今天我們先來了解一下行內元素怎麼進行水平居中？
如果被設定元素為文字、等行內元素時，水平居中是通過給父元素設定text-align:center來實現的。(父元素和子元素：如下面的html**中，div是「我想要在父容器中水平居中顯示」這個文字的父元素。反之這個文字是div的子元素 )如下**：
html**：
我想要在父容器中水平居中顯示。
這一小節我們先來講一講定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width為固定值。)
滿足定寬和塊狀兩個條件的元素是可以通過設定「左右margin」值為「auto」來實現居中的。我們來看個例子就是設定 div 這個塊狀元素水平居中：
html**：
我是定寬塊狀元素，哈哈，我要水平居中顯示。
margin-left:auto;
margin-right:auto;
在實際工作中我們會遇到需要為「
不定寬度的塊狀元素
」設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。(
不定寬塊狀元素：塊狀元素的寬度width不固定。)
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
加入 table
標籤設定 display: inline
方法：與第一種類似，顯示型別設為 行內元素，進行不定寬元素的屬性設定
設定 position:relative
和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的
這一小節我們來講一下第一種方法：
為什麼選擇方法一加入table標籤? 是利用table標籤的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
第一步：為需要設定的居中的元素外面加入乙個 table 標籤 ( 包括 、、)。
第二步：為這個 table 設定「左右 margin 居中」（這個和定寬塊狀元素的方法一樣）。
舉例如下：
html**：
第二種方法：改變塊級元素的 display 為 inline 型別（設定為 行內元素 顯示），然後使用text-align:center來實現居中效果。如下例子：
html**：
除了前兩節講到的插入table標籤，以及改變元素的
display
型別，可以使不定寬塊狀元素水平居中之外，本節介紹第3種實現這種效果的方法，設定浮動和相對定位來實現。
方法三：通過給父元素設定
float
，然後給父元素設定
position:relative
和 left:50%，子元素設定 position:relative 和 left:
-50%
來實現水平居中。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css**是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css**則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。
**如下：
這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
（來自愛慕課網課程：
css樣式設計 基本樣式
盒子陰影 box shadow 盒子陰影 水平方向上陰影偏移量 垂直方向上陰影偏移量 模糊的程度 正值 陰影的外延伸 數值正負皆可 陰影的顏色 inset box shadow 0px 0px 10px red inset 顏色 表示顏色的方式 顏色名，英文 rgb red green blue 0...
CSS樣式小筆記
樣式 偏斜體 italic 斜體 normal 正常 行高 正常 單位 px pd em 粗細 粗體 lighter 細體 normal 正常 變體 小型大寫字母 normal 正常 大小寫 首字母大寫 uppercase 大寫 lowercase 小寫 none 無 修飾 下劃線 overline...
css樣式小技巧
1.css樣式小技巧 html怎樣設定使背景不隨頁面滾動而滾動 background attachment fixed 2.實現li a 超過長度內容出現省略號 overflow hidden white space nowrap text overflow ellipsis 3.使用 line h...