css水平居中怎麼設定？兩種css水平居中的設定方法-css教學-PHP中文網

css樣式能夠實現水平居中，那麼css水平居中怎麼設定呢？ 本篇文章將給大家分享關於css設定水平居中的實作方法。

css中可以設定行內元素的水平居中和設定區塊級元素的水平居中，對於行內元素和區塊級元素不了解的同學可以參考一下css區塊級元素的定義是什麼？ css塊級元素有哪些？和css行內元素有哪些？ css區塊級元素和行內元素的差別這兩篇文章，那我們下面就直接來看css這兩種水平居中的設定方法。

首先我們來看看css設定行內元素水平居中。

第一種：css行內元素水平居中：

語法：div{text-align:center} /*DIV內的行內元素都會水平居中* /

簡單解釋：為父元素設定中text-align:center樣式。

<div style="text-align: center">
    <span>行内元素水平居中</span>
</div>

登入後複製

詳細解釋：

1、文字在這裡讓「文字」這兩個字相對於label水平居中是毫無意義的，label是行內元素，他的寬度等於內容的寬度，也就是說「文字」這兩個字，永遠是水平居中的。

2、

文字

此時，讓「文字」這兩個字水平居中便有了意義，因為p是塊級元素，他的寬度獨佔一行，而文字只佔兩個字元寬度，此時為p元素設定text-align:center;那麼「文字」這兩個字便在一行內水平居中了。

3、

文字

,此時該如何讓label元素相對於div水平居中。

看完了css行內元素水平居中，我們接下來說一說css塊級元素的水平居中，css塊級元素水平居中又分為定寬塊級元素水平居中和不定寬塊級元素水平居中，下面我們分別來看看。

第二種：css定寬區塊級元素水平居中：既是區塊級元素又是固定寬度的元素。

給需要水平居中的區塊級元素本身左右margin值設定為auto;

例如：

<div>
    <div style="width: 100px;height: 100px;background-color: green;margin: 0 auto">
    </div></div>

登入後複製

css不定寬區塊級元素水平居中：寬度不固定的區塊級元素

例如：

1、將區塊級元素加入

標籤。

<table style="margin: 0 auto">
    <tbody>
        <tr><td>
                <div>设置table实现水平居中</div>
    </td></tr>
    </tbody></table>

登入後複製

2、設定區塊級元素樣式display:inline，然後再為父元素加入text-align:center樣式。

<div style="text-align: center">
    <div style="display: inline">
        设置inline实现水平居中    
 </div></div>

登入後複製

3、在區塊級元素外加上一層父元素，並設定父元素樣式為style="float:left;position:relative;left:50%";設定區塊級元素樣式為style="float:left;position:relative;left:-50%"

<div style="float:left;position:relative;left: 50%">
    <div style="position: relative;left: -50%">
        设置relative实现水平居中
    </div>
</div>

登入後複製