理解CSS居中

時間 2019-12-05

標籤理解 css 居中欄目 CSS 简体版

原文原文鏈接

我想不少在前端學習或者開發過程當中，確定會遇到如何讓你的元素居中的問題，網上google確定會有不少的解決方法。今天我就我的的項目與學習經驗談談我的理解css如何讓元素居中。css

要理解css的居中，首先必須理解css的元素分類以及css的盒模型(box model)。html

a. 元素分類。前端

在css中把元素分爲塊級元素、內聯元素以及內聯塊級元素。chrome

塊級元素最明顯的特徵就是: { display: block; } 。塊級元素獨佔一行，默認狀況元素的width默認爲100%，但能夠修改元素的height, width等樣式；例如html中的<div>, <p>, <ul>, <li>, <hx>, <form>等。瀏覽器

內聯元素最明顯的特徵是 { display: inline; } 。也叫行內元素，能夠與其餘行內元素共享一行，可是其height, width, margin-top, margin-bottom均不可設置。例如html中的<span>, <a>, < label>, <input>等。學習

內聯塊級元素，也就是行內塊級元素 { display: inline-block; } 。顧名思義，內聯塊級元素既有塊級元素的特徵，也有內聯元素的特徵。也就是inline-block能夠與其餘元素共享一行，也能夠設置height, width等樣式。google

b. 盒模型(box model)。spa

在css中，全部的元素都有盒模型，打開chrome審查任何一個網頁的元素都會看到一個盒模型。3d

圖1. css盒模型code

正如圖1所示，一個盒模型有margin, border, padding以及盒子自己的尺寸(height, width)，從字面量上通俗地講就是（多個）盒子的間距、盒子的邊框、盒子內的填充、以及盒子的寬、高。咱們能夠經過css修改這些樣式，例如：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div{
 8             width: 300px;
 9         }
10         div.box-model{
11             margin: 10px;
12             padding: 10px;
13             border: solid 2px;
14             width: 100px;
15             height: 60px;
16             display: inline-block;
17             background: #999;
18         }
19     </style>
20 </head>
21 <body>
22     <div>
23         <div class="box-model">div1</div>
24         <div class="box-model">div2</div>
25         <div class="box-model">div3</div>
26         <div class="box-model">div4</div>
27     </div>
28 </body>
29 </html>

　　　　　　　　　　　　　　圖2. css盒模型樣式的修改

接下來說如何對一個元素進行居中：

1.水平居中：

1.1內聯元素的居中

　　對內聯元素居中只須要給其父元素設置 {text-align: center; } 便可；

2.2塊級元素

　　2.2.1寬度固定；若塊級元素的寬度是固定的能夠同時設置其左右的邊距 { margin-left: auto; margin-right: auto; } 爲自動讓其居中；

　　2.2.2寬度不定，咱們在開發過程當中，咱們塊級元素的寬度大多數是不固定的，對寬度未知的塊級元素有不少種方法，如今主要講一些方法，最主要的是其思想，你們必定要注意體會其思想。

　　　　a.利用<table>標籤；將元素放在<td>中，給table增長樣式 { margin-left: auto; margin-right: auto; }

　　　　b.將塊狀元素修改成內聯元素利用內聯元素的方法，即修改元素的 { display: inline; } ，並修改其父元素的 {text-align: center; } 。

　　　　c.給父元素設置float，並設置 { float:left; position:relative; left:50%; } ，在給該塊級元素設置 { position:relative; left:-50%; } 便可。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .width-block{
 8             width: 200px;
 9             margin-left: auto;
10             margin-right: auto;
11             background: #9cc;
12         }
13         table{
14             margin:0 auto;
15         }
16         table div{
17             background: #9cc;
18         }
19         .float-father{
20             float: left;
21             position: relative;
22             left: 50%;
23         }
24         .float{
25             position: relative;
26             left: -50%;
27             background: #fcc;
28         }
29     </style>
30 </head>
31 <body>
32     <div>
33         <div class='width-block'>div center with width</div>
34     </div>
35     <table>
36         <tbody>
37             <tr>
38                 <td>
39                     <div>div center with table</div>
40                 </td>
41             </tr>
42         </tbody>
43     </table>
44     <div class='float-father'>
45         <div class='float'>
46             div with float father
47         </div>
48     </div>
49 </body>
50 </html>

　　　　總結：

　　　　方法a：雖然實現了塊級元素的居中，可是卻增長了沒有語義的標籤。

　　　　方法b：改變了標籤元素特性，使其成爲了內聯元素，使得其失去了塊狀元素的固有特性，如height, width等。

　　　　方法c：設置了position爲relative，且改變了其層模型屬性。

2.垂直居中：

2.1 父元素高度肯定的狀況下單行文本：只要設置其父元素的line-height與其高度一致便可；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         #div1{
 8             height: 100px;
 9             background: #fcc;
10             line-height: 100px;
11             border: solid;
12         }
13     </style>
14 </head>
15 <body>
16     <div id='div1'>
17         <div>single line text</div>
18     </div>
19 </body>
20 </html>
21 
22 單行文本

2.2 父元素高度肯定的多行文本

　　a. 利用<table>標籤，css中有一個用於垂直居中的屬性vertical-align，可是這個樣式只有在table標籤中的th或者td中才會生效。所以藉助table標籤能夠使元素垂直居中；

 1 <table>
 2     <tbody>
 3         <tr>
 4             <td>
 5                 <div>
 6                     <div>text1</div>
 7                     <div>text2</div>
 8                     <div>text3</div>
 9                 </div>
10             </td>
11         </tr>
12     </tbody>
13 </table>

1 td{
2      height: 200px;
3      vertical-align: middle;/*td默認爲middle,能夠不設置 */
4      }

　　b. 利用 { display: table-cell; } ，其實也是跟方法a相似，這裏是經過display來激活vertical-align屬性，可是IE8之前的瀏覽器不支持table-cell。與a方法不一樣的是這裏須要顯示去設置 { vertical-align: middle; } 。

1 <div id="table-cell">
2      <div>div1</div>
3      <div>div2</div>
4      <div>div3</div>
5      <div>div4</div>
6  </div>

1 #table-cell{
2             display:table-cell;
3             vertical-align:middle;
4             height:200px;
5             background:#fcc;
6             border: solid;
7         }

2.3高度不肯定

能夠設置父元素的padding對top和bottom一致 { padding-top: 50px; padding-bottom: 50px; } 來控制元素的垂直居中，可是必須是父元素可以設置padding-top和padding-bottom，也就是父元素爲行內元素確定不行。

1  <div class='bypadding'>
2      <div>div1</div>
3      <div>div2</div>
4      <div>div3</div>
5      <div>div4</div>
6  </div>

.bypadding{
             padding:50px 0;
             border:solid;
             background: #fcc;
         }

總結，在經常使用CSS居中的解決方法中，咱們須要理解css的塊級元素、內聯元素，並在解決過程當中巧妙運用塊級元素以及內聯元素的特性，有時候能夠藉助table標籤的特性。

文章地址：http://www.cnblogs.com/alvinwei1024/p/4616322.html

1. css-垂直居中詳解
2. 【CSS篇】css居中解決辦法
3. CSS之居中
4. CSS 居中
5. CSS居中
6. css居中，margin_and_position
7. css居中
8. CSS垂直居中，水平居中
9. CSS垂直居中和水平居中
10. 【CSS】水平居中和垂直居中
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Scala 中文亂碼解決
• Docker 清理命令

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。