一、水平居中設定
在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。
我們將其分為兩種情況：行內元素和塊狀元素，塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。
1.行內元素
如果被設定元素為文字、等行內元素時，水平居中是通過給父元素設定text-align:center來實現的。(父元素和子元素：如下面的html**中，div是「我想要在父容器中水平居中顯示」這個文字的父元素。反之這個文字是div的子元素 )
html**：
css**
div這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
二、垂直居中設定
1.父元素高度確定的單行文字
在實際工作中也會遇到需要設定垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設定為垂直居中，為了使用者體驗性好。這裡我們又得分兩種情況：父元素高度確定的單行文字，以及父元素高度確定的多行文字。
本節我們先來講在父元素高度確定的單行文字, 怎麼設定它為垂直居中。
父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和line-height高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文字中，行與行之間的基線間的距離 )。
這種文字行高與塊高一致帶來了乙個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。
line-height 與 font-size 的計算值之差，在 css 中成為「行間距」。分為兩半，分別加到乙個文字行內容的頂部和底部。html**：
html**：
css**：
2.父元素高度確定的多行文字
方法一：使用插入table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle。
css 中有乙個用於豎直居中的屬性 vertical-align，在父元素設定此樣式時，會對inline-block型別的子元素都有用。
html**：
css**：
因為 td 標籤預設情況下就預設設定了 vertical-align 為 middle，所以我們不需要顯式地設定了。
html**：
css**：
這種方法的好處是不用新增多餘的無意義的標籤，但缺點也很明顯，它的相容性不是很好，不相容 ie6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質。
三、隱性改變display型別
只要html****現以下兩句之一
1.position:absolute
2.float : left 或 float:right
元素的display顯示型別就會自動變為以 display:inline-block（塊狀元素）的方式顯示，當然就可以設定元素的 width 和 height 了，且預設寬度不佔滿父元素。
如下面的**，a 標籤是行內元素，所以設定它的 width 是 沒有效果的，但是設定為 position:absolute 以後，就可以了。
html**：
css**：
感謝閱讀
web前端 CSS樣式
一 樣式 a css cascading style sheet 層疊樣式表 b 樣式的引入方式 行內樣式 內容 內部樣式 在頁面頭部 外部樣式 在頁面頭部以link標籤鏈入 c 樣式的基本語法 1.選擇器 2.基本選擇器的種類 1.標籤選擇器 標籤名稱 同名標籤自動響應 2.類選擇器 類選擇器名稱...
web前端之CSS樣式書寫方法
回顧之前寫的內容 1.認識編譯軟體和html 2.html中的標籤和特殊字元 3.html中的頭部標籤和常用標籤 4.超連結 錨鏈結和功能性鏈結 之前介紹過修飾網頁需要用到css樣式，但是在 寫css樣式呢？這篇帖子就介紹如何書寫。本篇帖子的目錄 1.內部css樣式 書寫 2.外部css樣式 書寫 ...
web前端學習之CSS
書寫樣式和引入方法 css cascading style sheets 全程為層疊樣式表，它主要用於定義html內容在瀏覽器內的顯示樣式，如文字大小 顏色 加粗等等。使用css樣式的好處是通過定義某個樣式，可以讓不同的網頁位置有著統一的字型 字型大小或者顏色等等。換言之，使用css可以有效的減少我...