css樣式能夠實作水準居中，那麼css水準居中怎麼設定呢？本篇文章将給大家來分享關于css設定水準居中的實作方法。
css中可以設定行内元素的水準居中和設定塊級元素的水準居中，對于行内元素和塊級元素不了解的同學可以參考一下css塊級元素的定義是什麼？css塊級元素有哪些？和css行内元素有哪些？css塊級元素和行内元素的差別這兩篇文章，那我們下面就直接來看css這兩種水準居中的設定方法。
首先我們來看一下css設定行内元素水準居中。
第一種：css行内元素水準居中：
文法：div{text-align:center}
簡單解釋：為父元素設定中text-align:center樣式。
行内元素水準居中
詳細解釋：
1、文字在這裡 讓“文字”這兩個字相對于label水準居中是毫無意義的，label是行内元素，他的寬度等于内容的寬度，也就是說“文字”這兩個字，永遠是水準居中的。
2、
文字
此時，讓“文字”這兩個字水準居中便有了意義，因為p是塊級元素，他的寬度獨占一行，而文字隻占兩個字元寬度，此時給p元素設定text-align:center;那麼“文字”這兩個字便在一行内水準居中了。
3、
文字 ,此時該如何讓label元素相對于div水準居中。
看完了css行内元素水準居中，我們接下來說一說css塊級元素的水準居中，css塊級元素水準居中又分為定寬塊級元素水準居中和不定寬塊級元素水準居中，下面我們分别來看一下。
第二種：css定寬塊級元素水準居中：既是塊級元素又是固定寬度的元素。
給需要水準居中的塊級元素本身左右margin值設定為auto；
例如：
css不定寬塊級元素水準居中：寬度不固定的塊級元素
例如：
1、将塊級元素加入
| 設定table實作水準居中 |
2、設定塊級元素樣式display:inline，然後再為父元素添加text-align:center樣式 。
設定inline實作水準居中
3、在塊級元素外加一層父元素，并設定父元素樣式為style="float:left;position:relative;left:50%";設定塊級元素樣式為style="float:left;position:relative;left:-50%"
設定relative實作水準居中
相關推薦：