CSS 中幾種最常用的水平垂直居中的方法

SS 是前端里面的基礎之一，也是非常重要的一部分，它往往決定了你所做出來的網頁頁面是否美觀。在設計網頁頁面的過程中，總會有將元素或者文字進行水平垂直居中的要求。下面w3cschool編程獅就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。

一、使用 margin:auto

當元素有給定的高度以及寬度的時候，使用 margin: auto; 元素僅會水平居中，并不會進行垂直居中。此時就需要設置元素的 position 為 absolute，父級元素的 position 為 relative，同時元素的上下左右都需要設置為 0。

HTML 代碼

<div class="box">
  <div class="center1"></div>
</div>

CSS 代碼

.box{
  width: 200px;
  height: 200px;
  background-color: #eee;
  position: relative;
  margin-top: 20px;
}
.center1{
  width: 50px;
  height: 50px;
  background-color: #00ACED;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

效果展示：

二、使用 position:absolute

當已經知道了要進行水平垂直居中的元素的寬高時，就可以通過設置 position: absolute 來實現。但是，使用的同時還需要結合其他屬性才完整實現。因為，單是設置 absolute，上左距離均為一半，就會出現下面這種情況。很顯然可以看到，元素并不是完全居中，僅只有左上角的位置在中心點

概念圖：

因此想要實現元素完全水平垂直居中，在設置了 absolute 定位后，可以設置 margin 值為負，或者使用 calc 來計算，上左距離在 50% 的基礎上還要減去元素本身一半的寬高。

margin 值為負或者 calc 計算均是在已知元素寬高的情況下，假設不知道元素的寬高，那么怎么實現水平垂直居中呢？這里就可以使用 transform 屬性，通過坐標位移來實現居中。

CSS 代碼

/* 結合 margin */
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}
/* 結合 calc 計算*/
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: calc(50% - 25px)
  top: calc(50% - 25px);
}
/* 結合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

效果展示

PART

三、使用彈性布局

可以通過彈性布局來設置水平垂直居中，這里需要設置父級元素 display:flex; 還需要設置兩個屬性，水平布局 justify-content 以及垂直布局 align-items。

HTML代碼

<div class="box2">
  <div class="center4"></div>
</div>

CSS代碼：

.box2{
  background-color: #eee;
  width: 200px;
  height: 200px;
  position: relative;
  margin-top: 20px ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center4{
  width: 50px;
  height: 50px;
  background-color: #B39873;
}

效果展示：

四、文本水平對齊和行高

前面介紹的是元素如何實現水平垂直居中，下面介紹的是如何將文字進行水平垂直居中。這第一個方法也是最經常用的，使用文本水平對齊 text-align 和行高 line-height 來實現的。

HTML 代碼

<div class="box3">
  <div class="center5">文字居中</div>
</div>

CSS 代碼

.box3{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
.center5{
  text-align: center;
  line-height: 200px;
}

效果展示

PART

五、使用網格布局

第二個方法可以通過網格布局 grid 來實現。而這里通過 grid 有兩種方式實現，一種對元素本身屬性進行設置，另一種在元素的父級元素中設置。兩者看上去內容似乎差不多，不同的是在元素中設置的是 align-self 還要多了一個 margin，父級元素中是 align-items。

相關代碼：

/* grid 元素中設置 */
.box4{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
}
.center6{
  align-self: center;
  justify-content: center;
  margin: auto;
}
/* grid 父級元素中設置 */
.box5{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
  align-items: center;
  justify-content: center;
}

效果展示：

六、總結

以上就是關于 CSS 如何將元素或者文字進行水平垂直居中的幾種常用方法，大家還其他關于 CSS 實現水平垂直居中的方法嗎？請在評論區留下你的想法。

關注w3cschool編程獅訂閱更多IT資訊、技術干貨~

、定位的基本概念

在我們瀏覽網頁的過程中，經常會發現網頁中的元素重疊展示，例如一個列表壓在了一張圖片之上，或者瀏覽器右下角突然彈出的廣告壓到了其他元素之上，這些都需要使用css的定位才能實現，本節我們就講解css定位相關的屬性，定位可以分為三類:

絕對定位
相對定位
固定定位

二、css定位詳解

我們可以通過position屬性，將一個元素設置成定位元素，之后就可以通過top、left、bottom、right屬性來設置元素的坐標。

絕對定位

將一個元素設置下面的屬性：

1 element{
2     position:absolute;
3 }

元素就變成了一個絕對定位元素，實例代碼如下所示。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .box{
 8             width:100px;
 9             height:100px;
10             background-color: #f00;
11             border:1px solid #0f0;
12         }
13         .pos{
14             position: absolute; /*設置絕對定位元素*/
15             top:50px;           
16             left:50px;
17         }
18     </style>
19 </head>
20 <body>
21     <!-- 一個元素可以設置多個class屬性，用空格區分開 -->
22     <div class="box">1</div>
23     <div class="box pos">2</div>
24     <div class="box">3</div>
25 </body>
26 </html>

從上面代碼的效果中，我們可以了解以下幾點：

絕對定位元素脫離文檔流，并不占位，第一個div和第三個div相鄰。
原點在整個網頁左上角的位置。
定位的坐標分別是top:50px;left:50px;這個值是元素左上角距離原定的距離。

相對定位

將一個元素設置下面的屬性：

1 element{
2     position:relative;
3 }

元素就變成了一個相對定位元素，實例代碼如下所示。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .box{
 8             width:100px;
 9             height:100px;
10             background-color: #f00;
11             border:1px solid #0f0;
12         }
13         .pos{
14             position: relative; /*設置相對定位元素*/
15             top:50px;
16             left:50px;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="box">1</div>
22     <div class="box pos">2</div>
23     <div class="box">3</div>
24 </body>
25 </html>

從上面代碼的效果中，我們可以了解以下幾點：

相對定位元素不脫離文檔流，元素占位，第一個div和第三個div不相鄰，中間的間距就是相對定位元素的位置。
原點在其占位位置的左上角。
定位的坐標分別是top:50px;left:50px;這個值是元素左上角距離原定的距離。

固定定位

將一個元素設置下面的屬性：

1 element{
2     position:fixed;
3 }

元素就變成了一個固定定位元素，實例代碼如下所示。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         body{
 8             height:1000px;
 9         }
10         .box{
11             width:100px;
12             height:100px;
13             background-color: #f00;
14             border:1px solid #0f0;
15         }
16         .box2{
17             position: fixed; /*設置固定定位元素*/
18             top:50px;
19             left:50px;
20         }
21     </style>
22 </head>
23 <body>
24     <div class="box box1">1</div>
25     <div class="box box2">2</div>
26     <div class="box box3">3</div>
27 </body>
28 </html>

從上面代碼的效果中，我們可以了解以下幾點：

固定定位元素脫離文檔流，并不占位，第一個div和第三個div相鄰。
我們將body元素的高度設置成1000px，這樣我們就可以通過滾輪控制網頁顯示的位置。
原點在瀏覽器當前窗口的左上角。
定位的坐標分別是top:50px;left:50px;這個值是元素左上角距離原定的距離。
當混輪滾動的時候，固定定位元素永遠相對于窗戶的位置定位。

設置參照物

理解了上面三種定位方法，我們再來考慮開始提到的那個問題，如果我們希望將一個數字列表壓在一張圖片之上。居中顯示在網頁之上，我們將數字列表設置定位之后，坐標應該設置成多少呢？因為居中的圖片與瀏覽器窗口的左邊距是不固定的，所以沒有辦法設置成一個固定值，這個時候，我們就需要給定位元素設置參照物。

將父級元素設置定位元素，那么子級元素定位的坐標原點會設置為父級元素左上角的位置。代碼如下所示。

1 <div class="container">
2     <div class="box"></div>
3 </div>

 1  .container{
 2     width:300px;
 3     height:300px;
 4     border:1px solid blue;
 5     position: relative;;
 6     top:100px;
 7     left:100px;
 8 }
 9 .box{
10     border:blue 4px solid;
11     width:100px;
12     height:100px;
13     position:absolute;
14     top:10px;
15     left:20px;
16 }

父級容器不管是絕對定位，相對定位還是固定定位，都可以實現作為參照物的效果，在實際項目開發中，常用方法如下所示：

如果父級元素不脫離文檔流，參與正常排版，那么父級設置相對定位。
如果父級需要根據視窗的顯示位置而變化位置，可以設置固定定位。

一般父級容器不設置絕對定位。

注意事項

大家掌握了定位之后會發現一個問題，那就是只要我么使用定位，就可以實現所有的網頁效果，再也不需要浮動布局，也不用管網頁的樹狀結構了。

這樣做其實是不可以的，在制作網頁的過程中，我們不僅要將元素放在指定的位置，還要考慮網頁的后續可維護性，已經針對不同屏幕尺寸的適應能力。因此，定位是我們實現網頁布局的最后手段。多于一個新手來說，能不用定位來實現的布局，都不要用定位來實現。

三、課后練習

完成融職教育右側返回頂部的懸浮效果。
制作一個在圖片上顯示圖標描述文字的效果，并且圖片再網頁右下角顯示。
制作一個標題效果，讓標題左右兩邊各帶一個橫線（使用偽元素和定位來實現）。

【融職教育】在工作中學習，在學習中工作

聯網前端技術中最基礎的事情就是做頁面。

做頁面最基礎的事情就是做版塊的布局。

做布局最基礎的事情就是元素的定位。

而定位竟又分出了5種類型：

正常定位 static
相對定位 relative
絕對定位 absolute
固定定位 fixed
粘性定位 sticky

說到定位，確實是個實踐性很強的技術，光看文檔和范例未必能準確理解掌握，一旦實際應用，如果沒有章法，各種定位方式混在一起，相互作用，相互干擾，排版就變成了尷尬的算術題，往往越寫越亂，經常會產生莫名其妙的排版結果，弄的很頭大，即使最終做出了需要的頁面效果，往往也是連蒙帶猜，反復調試修改，花費大量時間不說，代碼質量一定也很差。

所以無論初學者還是有一定經驗的，無論是手寫布局，還是使用各種UI框架做頁面，都應該對這幾種定位方式弄清楚細節，后續工作中才會更加順利，事半功倍。

為此筆者精心制作了幾張圖解，配以對應的示范代碼，并從實踐的角度簡化了定位的原則，旨在以一種更易于理解、更貼近實戰的方式，讓你看明白、搞清楚。

正常文檔流

頁面是如何建立起來的呢？是通過html和css代碼形成頁面結構，把各個元素塊兒，像寫word文檔那樣，讓圖片文字一個接一個地排列組合而成。正常的文檔流，默認情況下，每個元素都會占用一定的空間，它們從左到右，從上到下依次排列，相互不會覆蓋。

定位

所謂定位，就是人為的設定每個元素塊上下左右的位置。之所以要定位，就是為了改變文檔流中緊挨著的元素位置，實現我們所需要的排版意圖。設定位置主要有2個途徑：

1、在正常的文檔流中：所有元素都可以通過 margin 控制它同外圍4周元素的距離
2、有浮起特性的元素：通過 top,left,right,bottom 指定浮起后額外的位置偏移

所謂浮起，是指元素離開文檔流，本身不再占據空間，好像飄浮在上面

定位就是設置 position 屬性，它可以有5個類型，下面分別說明：

一、正常定位 static

position為空，則默認就是static，正常定位就是正常的文檔流，所有元素都可以通過 margin 控制它同外圍4周元素的距離，在寫法上通常可以這樣寫

margin:1px 2px 3px 4px;

4個數值分別代表：矩形元素的4條邊同上、右、下、左（就是順時針走一圈）周圍元素的距離。也可以分開寫成 margin-top、margin-right、margin-bottom、margin-left

先簡要介紹下實驗用的代碼：

實驗代碼的html部分如下

<div class="demo">static定位</div>
<div class="box">
	<div class="demo">（容器內）static定位</div>
	<div>（容器內）后面的文檔流</div>
</div>

這個文檔流是這樣構成的：

首先一個div用static定位，下面跟一個容器div，容器中又有一個div也是static定位，后面跟一段文字塊。

在后續幾個定位模式中我們重復地使用這個html代碼，僅僅修改其引用的css中的position屬性，來觀察變化。

實驗代碼的css部分如下

<style>
body{font-family:"Microsoft YaHei";margin:0;}
.box{
	width:400px;height: 200px;
	border: 1px solid green;background-color: #cfc;opacity:0.7;
	margin: 50px 0 0 50px;
}
.demo{
	position: static;
	width: 100px; height: 40px;
	border: 1px solid red;background-color: #fcc;opacity:0.8;color:red;
	top:50px;left:100px;
	margin:20px 0 0 10px;
}
</style>

body的樣式定義了字體，設置頁面邊距為0，這個僅僅是做個基礎效果，跟本次主題無關。

.box的樣式是做為容器用的，我們統一設置為：

容器款400高200，左邊距50上邊距50，邊框綠色，背景淺綠半透明。后面我們簡稱其為“綠色容器塊”

.demo的樣式是為測試定位用的：

設置基礎樣式寬100高40，邊框紅色，背景淡紅半透明，字體紅色
設置margin為左邊距10，上邊距20，設置浮動為top上邊距50，left左邊距100
設置position: static;

其中前2個設置是固定的，我們在后續幾個定位模式中會重復地使用這部分css代碼。至此，我們設置好了“2個紅色塊，一個在容器外，一個在容器內”。在容器外的紅色塊，其實就是以瀏覽器窗口為容器了。

現在只需通過修改position的不同類型，查看2個紅色塊兒和綠色容器的位置關系，就可以了解各種定位究竟是怎么回事了。

先看看正常定位時的效果：

這就是正常的文檔流，2個紅色塊只有margin起作用，左邊和上邊各自距離上級容器10和20像素，而綠色容器的左邊以窗口為基準，上邊以上一個紅色塊底部為基準來定位50像素

二、相對定位 relative

.demo改一行css

position: relative;

看看效果

注意幾個變化：

紅色塊相對原來的位置移動了left和top的距離，其基準是各自所在的容器。
綠色容器的位置沒有變，仿佛仍然緊跟原來位置的紅色塊（仍占位）
綠色容器里面的文字塊位置沒變，仿佛仍然緊跟容器內紅色塊原來的位置（仍占位）

三、絕對定位 absolute

.demo改一行css

position: absolute;

看看效果

我們看到了明顯的變化：

綠色的容器位置變了，其頂部的位置基準變成瀏覽器窗口的頂部，而不是跟著原來的紅色塊了。
兩個紅色塊也重疊到一起了，因為容器內部的紅色塊的位置基準也變成了瀏覽器窗口，
綠色容器里面的文字塊位置變了，容器內紅色塊原來的位置不再占用，所以文字提前了

接下來，如果我們把綠色容器的定位屬性改一下會如何？

position: relative;

看看效果

效果跟剛才不一樣了，區別在哪里呢？區別就是：

2個紅色塊的位置基準，分別是各自原來的容器，即容器外的相對于瀏覽器窗口，容器內的相對于容器

四、固定定位 fixed

.demo改一行css

position: fixed;

仔細看我們發現跟前面position: absolute;時的第一種情況一樣，沒錯，確實一樣，但是有一個區別，就是當我們滾動屏幕的時候，所有元素都在滾動，只有那2個紅色塊是固定不會動的！而前面absolute狀態時，2個紅色塊是跟著滾動的。

五、粘性定位 sticky

.demo改一行css

position: sticky;

從外觀上看跟static是一樣的，不過sticky有個神奇的地方在于其“粘性”，我們重新寫一段代碼來演示它：

<style>
	body{background-color: #333;color:#eee;font-size:24px;margin:0;}
	.demo{
		width: 100%;height: 40px;
		background-color: #e00;
		position: sticky; top:10px;
	}
</style>
<!-- 頂部內容 -->
<div style="height:100px;">
	頂部菜單若干1<br>
	頂部菜單若干2<br>
	頂部菜單若干3<br>
</div>
<!-- 第1屏內容 -->
<div>
	<div class="demo">sticky定位，先走再停，第一屏走完我才走</div>
	正文第1屏1<br>
	正文第1屏2<br>
	正文第1屏3<br>
	正文第1屏4<br>
	正文第1屏5<br>
	正文第1屏6<br>
	正文第1屏7<br>
	正文第1屏8<br>
	正文第1屏9<br>
</div>
<!-- 第2屏內容 -->
<div style="height:10000px;color:#0e0;">
	正文第2屏1<br>
	正文第2屏2<br>
	正文第2屏3<br>
	正文第2屏4<br>
	正文第2屏5<br>
	正文第2屏6<br>
	正文第2屏7<br>
	正文第2屏8<br>
	正文第2屏9<br>
</div>

效果是這樣：

總結一下：

正常定位 static（默認）

平時是正常文檔流、占據空間，用top,left指定位置是無效的
用途：大部分時候默認都用這個，是整個頁面的主文檔流

相對定位 relative

平時是正常文檔流、占據空間
指定位置top,left等后，相對于文檔流進行偏移、并浮起，但不釋放、也不改變原來占據的位置。
用途：通常用于做容器，以此容器為基準，里面再放置其它元素，這些元素相對于本容器進行絕對定位，以便將位置整體固定下來。

絕對定位 absolute

平時是正常文檔流，但是浮起的，不占據空間
指定位置top,left等后，分兩種情況：
1）如果其上級的position是空或者static

脫離正常文檔流，相對于瀏覽器的大窗口進行偏移，原來的margin也一起疊加，

2）如果其上級的position是relative或者其它定位

脫離同級文檔流，相對于上級容器的位置進行偏移，原來的margin也一起疊加。

滾動：有效。
用途：通常用于與上級relative容器搭配，做容器的子元素，這些元素相對于本容器進行絕對定位，以便將位置整體固定下來。

固定定位 fixed

平時是正常文檔流，但是浮起的，不占據空間
指定位置top,left等后，脫離正常文檔流，相對于瀏覽器的大窗口進行偏移，原來的margin也一起疊加。
滾動：無效。
用途：通常用于做頭部，尾部的導航、漂浮的菜單、廣告、客服入口提示等

粘性定位 sticky

平時是正常文檔流，占據正常空間。指定位置top,left等是無效的。
當拉動滾動條后，元素一開始在頁面滾動時也如同在正常流中，
但頁面向上滾動到top位置時就會固定在屏幕上，浮起不動，如同fixed一般。
當頁面繼續向上滾動，直到到它的上級容器的底部跟它的底部接觸后，就一起向上滾動，直到滾出屏幕。
這個屬性值在瀏覽器兼容性上比較差，低版本不支持。
用途：通常用于做頭部的關鍵導航區

像上面這樣一一羅列下來，仍然是很羅嗦的不是嗎？其實這就是一個通過做實驗，歸納總結，走腦子的過程，在沒有實踐經歷的時候，這些實驗性的代碼，把空洞的理論呈現了出來，而如何在實踐中用上這些定位的知識才是我們的最終目標。

定位3大原則：

從實戰的角度我把定位大致簡化為3個原則，既然是簡化的，因此就不太嚴謹，忽略了一些細節，也不是唯一最優方案，但多數情況下還是適用的，而且此簡化方案大大降低了使用的復雜性。

1、弄清一個塊兒在文檔流中是否占據位置空間？

正常定位、相對定位relative，都是正常擺放的塊兒，要占空間；
絕對定位absolute、固定定位fixed，都是浮起的塊兒，不占位置。

2、弄清如何設定一個塊兒的位置，其坐標是以誰為基準？

凡是要占空間的塊兒，用margin等確定位置，它是以4周相鄰元素為基準；
凡是不占位置的塊兒，盡量用top，left 等確定位置，它是以瀏覽器窗口（父容器為static或空時）或父容器為基準的。

3、上述5種定位方式在實踐中如何選用？

一般情況，只要是可以簡單依次排列的，就用默認的正常定位順次擺放元素即可；
局部的復雜精確排版，比如頁面中部的標題圖片列表，使用relative定位的塊兒做容器，內部元素相對于此容器做absolute絕對定位完成布局；
局部需要固定位置，不隨滾動條滾動的，比如頁面頭部尾部，使用fixed固定定位或sticky粘性定位。

至此，position定位的知識總結完了，排版布局終于有簡單的章法可依了，是不是很容易看懂呢？

在線咨詢

上一篇：你在網上看到的0失誤游戲視頻，用AI也能生成丨Demo在線玩
下一篇：15個好看的Bootstrap HTML網站模板下載

您的項目需求

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

整合營銷服務商

CSS 中幾種最常用的水平垂直居中的方法

一、使用 margin:auto

二、使用 position:absolute

三、使用彈性布局

四、文本水平對齊和行高

五、使用網格布局

六、總結

、定位的基本概念

二、css定位詳解

絕對定位

相對定位

固定定位

設置參照物

注意事項

三、課后練習

您的項目需求