CSS position &居中（水平，垂直）

時間 2019-11-19

標籤 css position 居中水平垂直欄目 CSS 简体版

原文原文鏈接

css position是個很重要的知識點：css

知乎Header部分：html

知乎Header-inner部分：web

position屬性值：瀏覽器

fixed：生成絕對定位的元素，相對瀏覽器窗口進行定位（位置可經過：left,right,top,bottom改變）;與文檔流無關，不佔據空間（可能與其它元素重疊）ide

relative：生成相對定位的元素（相對於元素正常位置）（left，right，top，bottom）；relative的元素常常用做absolute的元素的容器塊;原先佔據的空間依然保留佈局

absolute：生成絕對定位的元素（相對第一個已定位的父元素進行定位；若沒有則相對<html>）（left,right,top,bottom）；與文檔流無關，不佔據空間（可能與其它元素重疊）flex

static：默認值。沒有定位，元素出如今正常的文件流中（left,right,top,bottom,z-index無效！）ui

inherit：繼承從父元素的position值this

fixed示例：url

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>cascading style sheet</title>
 8     <style>
 9         #test{
10             width: 500px;
11             height: 100px;
12             position: fixed;
13             top: 0px;
14             left: 500px;
15             border: 1px solid burlywood;
16             background-color: #F2F2F2;
17             z-index: 2;
18         }
19         .test1{
20             margin-top: 100px;
21         }
22         .test1, .test2, .test3, .test4, .test5{
23             width: 200px;
24             height: 300px;
25             border: 1px solid black;
26             position: relative;
27             left: 500px;
28             background-color: gray;
29         }
30     </style>
31 </head>
32 <body>
33     <div id="test"></div>
34     <div class="test1">1</div>
35     <div class="test2">2</div>
36     <div class="test3">3</div>
37     <div class="test4">4</div>
38     <div class="test5">5</div>
39 
40 </body>
41 </html>

View Code

#test部分始終固定在上方，不發生移動。

relative示例：（原先佔據的空間依然保留！）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>position:relative</title>
 8     <style>
 9         .test1, .test2, .test3{
10             width: 200px;
11             height: 200px;
12             border: 1px solid orange;
13         }
14         .test2{
15             border-color: black;
16             position: relative;
17             top:-100px;
18             left: 10px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="test1">this is part 1</div>
24     <div class="test2">this is part 2</div>
25     <div class="test3">this is part 3</div>
26 </body>
27 </html>

View Code

運行結果：（箭頭所指這部分區域空間依然保留！！！）

凡是可能發生重疊的position屬性，均能使用z-index!

沒有指定z-index：代碼後面的在上面（「後來者居上」）；
z-index越大的在上面！

注意：當使用position或者float屬性時，一般<body>要預設定義margin和padding。這樣能夠避免在不一樣的瀏覽器中出現差別！

若是省略<!DOCTYPE>聲明，IE8及如下版本會在右側增長17px的外邊距！這彷佛是爲了滾動條預留的空間！因此，請始終設置<!DOCTYPE>聲明！！！

佈局之水平居中：

1.元素居中對齊（好比<div>）：

使用margin:0 auto;（上下margin爲0，左右自動分配（居中！））！注意：此方法元素需設置width屬性（除了width:100%）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>居中</title>
 8     <style>
 9         /* 預設置樣式 */
10         body{
11             margin: 0;
12             padding: 0;
13         }
14         .test1{
15             border: 1px solid gold;
16             width: 150px;
17             height: 150px;
18             margin: 0 auto;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="test1">this is test1</div>
24 </body>
25 </html>

View Code

2.圖像居中對齊（先設置display:block;再margin:0 auto）；

3.文本居中對齊（text-align:center;）

4.左右對齊：（①position:absolute;再設置left或right屬性值②float:left;或者float:right）

佈局之垂直居中：

方法一：line-height：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>居中</title>
 8     <style>
 9         /* 預設置樣式 */
10         body{
11             margin: 0;
12             padding: 0;
13         }
14         .test1{
15             border: 1px solid gold;
16             width: 150px;
17             height: 150px;
18             line-height: 150px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="test1">this is test1</div>
24 </body>
25 </html>

View Code

這個方法有一個缺陷，適用於：「只有一行話」。原理：就是塊元素（div）高度有多高，（行高）line-height就有多高！

不止一行話：

方法二：使用padding：

這種方法不會有上面line-height的「缺陷」，原理：好像就是"撐開"來同樣！（我的比較推薦！）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>居中</title>
 8     <style>
 9         /* 預設置樣式 */
10         body{
11             margin: 0;
12             padding: 0;
13         }
14         .test1{
15             border: 1px solid gold;
16             width: 200px;
17             padding: 100px 0px;
18             text-align: center;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="test1">this is test1 this is test1 this is test1 this is test1 this is test1 </div>
24 </body>
25 </html>

View Code

方法三：使用display:flex;align-items:center;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>居中</title>
 8     <style>
 9         /* 預設置樣式 */
10         body{
11             margin: 0;
12             padding: 0;
13         }
14         .test1{
15             border: 1px solid gold;
16             width: 200px;
17             height: 200px;
18             display: flex;
19             align-items: center;
20             text-align: center;
21             margin: 0 auto;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="test1">this is test1 this is test1 this is test1 this is test1 this is test1 </div>
27 </body>
28 </html>

View Code

方法四：使用position和transform

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>居中</title>
 8     <style>
 9         /* 預設置樣式 */
10         body{
11             margin: 0;
12             padding: 0;
13         }
14         .test1{
15             border: 1px solid gold;
16             width: 200px;
17             height: 200px;
18             position: relative;
19         }
20         .test1 p{
21             position: absolute;
22             left: 50%;
23             top: 50%;
24             transform: translate(-50%,-50%);
25             -webkit-transform: translate(-50%,-50%);
26             -ms-transform: translate(-50%,-50%);
27         }
28     </style>
29 </head>
30 <body>
31     <div class="test1"> <p>this is test1</p> </div>
32 </body>
33 </html>

View Code

相關標籤/搜索

每日一句

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