CSS-設置水平居中總結

平居中設置

我們在實際工作中常會遇到需要設置水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。

這里我們又得分兩種情況：行內元素還是塊狀元素，塊狀元素里面又分為定寬塊狀元素，以及不定寬塊狀元素。今天我們先來了解一下

行內元素

如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。

定寬塊狀元素

當被設置元素為塊狀元素時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。

如果是定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width為固定值。)

滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。

不定寬塊狀元素

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：

加入 table 標簽
設置 display: inline 方法：與第一種類似，顯示類型設為行內元素，進行不定寬元素的屬性設置
設置 position:relative 和 left:50%：利用相對定位的方式，將元素向左偏移 50% ，即達到居中的目的

第一種做法：

為什么選擇方法一加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。

第一步：為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 <tbody>、<tr>、<td> )。

第二步：為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。

舉例如下：

html代碼：

<div>
 <table>
 <tbody>
 <tr><td>
 <ul>
 <li>我是第一行文本</li>
 <li>我是第二行文本</li>
 <li>我是第三行文本</li>
 </ul>
 </td></tr>
 </tbody>
 </table>
</div>

css代碼：

<style>
table{
 border:1px solid;
 margin:0 auto;
}
</style>

第二種做法：

改變塊級元素的 display 為 inline 類型（設置為行內元素顯示），然后使用 text-align:center 來實現居中效果。如下例子：

html代碼：

<body>
<div class="container">
 <ul>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 </ul>
</div>
</body>

css代碼：

<style>
.container{
 text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
 list-style:none;
 margin:0;
 padding:0;
 display:inline;
}
/* margin-right:8px（設置li文本之間的間隔）*/
.container li{
 margin-right:8px;
 display:inline;
}
</style>

這種方法相比第一種方法的優勢是不用增加無語義標簽，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。

方法三：

通過給父元素設置 float，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。

我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。

代碼如下：

<body>
<div class="container">
 <ul>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 </ul>
</div>
</body>

css代碼：

<style>
.container{
 float:left;
 position:relative;
 left:50%
}
.container ul{
 list-style:none;
 margin:0;
 padding:0;
 
 position:relative;
 left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。

今天的內容中，廊坊網站建設公司的技術人員將分享下網站導航水平居中設置的方法，其實辦法有很多，以CSS代碼為例，這種代碼操作很方便，后期修改的時候也簡單，以下是詳細的實例操作。

方法一：使用display:inline-block控制

這個方法比較簡單，是將容器轉成display:inline-block行內塊級元素，然后就可以直接用text-align:center使其達到水平居中效果。HTML代碼中需要一個div來包圍這個導航菜單。

方法二：使用position:relative解決

position:relative定位方法來讓元素水平居中，一般來說小編推薦這方法，因為代碼多了個div去包住，當然這些是根據情況來使用的。將定位div設為浮動，再定位left:50%,然后導航定位至left:-50%。

方法三：使用display:table解決

HTML代碼實例

</ul>

CSS代碼實例

.navbar {

display:table;

margin:0 auto;

}

.navbar li {

display:table-cell;

}

.navbar li + li {

padding-left:20px;

}

方法四：使用display:inline-flex解決

HTML代碼實例操作

<ul>

</ul>

</div>

CSS代碼代碼編寫

.navbar {

text-align:center;

}

.navbar > ul {

display:-webkit-inline-box;

display:-moz-inline-box;

display:-ms-inline-flexbox;

display:-webkit-inline-flex;

display:inline-flex;

}

.navbar li + li {

margin-left:20px;

}

提示：瀏覽器兼容問題，目前這個代碼不支持IE7及以下版本的IE瀏覽器。

其實這些方法很好的解決了網站導航菜單居中的問題，使用CSS編寫有助于后期的修改，極大的方便了我們的操作和節省了寶貴的時間。在以后的內容中，小編還將會繼續為朋友們分享更多更有價值的知識。

原創文章出自暢想網絡，轉載地址：http://www.e-wkj.cn/xw/2316.html

SS控制居中是前端開發中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。

談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文檔流是水平方向的，所以水平方向上的布局控制比垂直方向要簡單很多，居中也是如此。不過（水平）垂直居中還是有很多種寫法，至少一只手是數不過來了，本文列出幾種，并進行簡單比較。

一、水平居中

使用CSS控制水平居中很簡單：

塊級元素設置width,并設置margin auto
內聯元素父元素設置text-align center
HTML代碼如下:

<div class="container">
 <div class="content">
 水平居中哦
 </div>
</div>

1. 塊級元素水平居中

.container {
 height: 300px;
 width: 300px;
 border: 1px solid red;
}
.content {
 width: 10rem;
 border: 1px solid green;
 margin: 0 auto;
}

效果：

2. 內聯元素水平居中

.container {
 height: 300px;
 width: 300px;
 border: 1px solid red;
 text-align: center;
}
.content {
 display: inline-block;
 border: 1px solid green;
}

效果：

代碼很簡單，而且沒什么兼容性問題，所以通常也不需要用別的復雜方式來實現水平居中效果。

二、水平垂直居中

使用CSS控制垂直居中（或者水平垂直居中）就不像控制垂直居中那么方便，這里主要羅列幾種。

1. flex布局

flex布局出現以后，垂直居中就很方便了，直接設置父元素：

display flex
align-items center

如果同時要水平居中，則同時設置：

justify-content center

需要注意的是IE10+才支持，webkit前綴瀏覽器設置flex屬性需要加webkit。

.container {
 width: 300px;
 height: 300px;
 border: 1px solid red;
 display: -webkit-flex;
 display: flex; // 關鍵屬性
 align-items: center;　// 垂直居中
 justify-content: center // 水平居中
}
.content {
 border: 1px solid green;
}

2. margin+ position:absolute布局

position: absolute布局的元素，通過設置top/bottom, left/right這兩對屬性，可以讓元素在垂直方向和水平方向分別具有了自適應的特性。就像div在水平方向的默認表現一樣!

上文中對于塊級元素的水平居中，我們設置寬度然后配合以margin可以實現水平居中。而對于設置了top/bottom,left/right的absolute定位元素，我們設置寬高再配合margin就可以達到水平垂直居中：

.container {
 width: 300px;
 height: 300px;
 position: relative;
 border: 1px solid red;
}
.content {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 width: 200px;
 height: 100px;
 margin: auto;
 border: 1px solid green;
}

效果：

兼容性很好，IE8以上支持。

3. transform + absolute

absolute定位元素的left、top屬性是子元素的左邊界、上邊界相對父元素進行定位；transform是CSS3中非常強大的一個屬性，可以接收多個屬性值，包括旋轉、縮放、平移等多種功能。這里使用二者配合，先將子元素左上定點定位到父元素中心點，再使用transform將子元素中心點移動到父元素的中心點即可：

.container {
 width: 300px;
 height: 300px;
 position: relative;
 border: 1px solid red;
}
.content {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%); 
 border: 1px solid green;
}

效果：

這個方法有個小缺陷，就是translate函數的參數，最后的計算值不能為小數，否則有的瀏覽器渲染出來效果會模糊，所以使用本方法的話最好設置一下寬高為偶數。

4. absolute+margin負值

與上一種方法很類似，上一種方法是使用transform將元素向左上平移，本方法則是使用margin負值的方式將元素拉向左上角。

代碼：

.container {
 width: 300px;
 height: 300px;
 position: relative;
 border: 1px solid red;
}
.content {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 200px;
 height: 100px;
 margin-top: -50px;
 margin-left: -100px;
 border: 1px solid green;
}

效果：

5. absolute + calc

從上兩種方法可以看到，absolute設置了left和top再通過平移或者margin將元素重新定位回去。如果我們直接可以計算出正確的left和top值，豈不是一次到位？calc函數正有此功能，當然我們需要知道子元素的寬高：

.container {
 width: 300px;
 height: 300px;
 border: 1px solid red;
 text-align: center;
 position: relative;
}
.content {
 position: absolute;
 border: 1px solid green;
 width: 200px;
 height: 100px;
 left: calc(50% - 100px);
 top: calc(50% - 50px);
}

效果：

6. line-height + vertical-align

vertical-align是一個作用于內聯元素的屬性。內聯元素的特性是會和其它內聯元素或者文字在同一行顯示，但是默認情況下是與父元素“基線對齊”的。這里的的基線指的是父元素每一行中的一個垂直位置，是英文ｘ下邊緣所在的水平, 通過設置vertical-align為middle可以將內聯元素的中部對齊父元素的中部（基線+字母ｘ的一半高度）。所以可以利用這一點，將父元素的行高設置為其自身高度，然后將子元素與父元素中線對齊，即可實現垂直居中。

代碼：

.container {
 width: 300px;
 height: 300px;
 border: 1px solid red;
 line-height: 300px;
 text-align: center;
}
.content {
 display: inline-block;
 line-height: 1.5;
 border: 1px solid green;
 vertical-align: middle;
}

效果：

以上幾種方法各有不同的適用條件，因此也有不同的優缺點，下表對各種方法進行了比較：

方法條件兼容性flex布局無IE10+margin + absolute知道子元素寬高IE8+transform + absolute無，子元素寬高應為偶數IE10+absolute + margin負值知道子元素寬高absolute + calc知道子元素寬高IE9+line-height + vertical-align知道父元素寬高

CSS中同一種表現效果往往有多種不同的實現方法，要刻意地嘗試多種寫法，避免熟悉了一兩種方法就止步不前，這樣才能對各種情況得心應手

在線咨詢

上一篇：前端常用meta標簽的作用以及全面整理
下一篇：JSP 文件上傳

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS-設置水平居中總結

行內元素

定寬塊狀元素

不定寬塊狀元素

您的項目需求