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>在這里 讓“文字”這兩個字相對于label水平居中是毫無意義的，label是行內元素，他的寬度等于內容的寬度，也就是說“文字”這兩個字，永遠是水平居中的。

2、<p>文字<p>此時，讓“文字”這兩個字水平居中便有了意義，因為p是塊級元素，他的寬度獨占一行，而文字只占兩個字符寬度，此時給p元素設置text-align:center;那么“文字”這兩個字便在一行內水平居中了。

3、<div><label>文字<label><div>,此時該如何讓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>標簽。

<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>

上文描述的就是css設置水平居中的兩種方法，具體使用情況還需要大家自己動手實驗使用過才能領會。如果想了解更多相關內容，歡迎關注億速云行業資訊頻道！