CSS 居中方法集錦
記錄收集純CSS層面實現的水平、垂直居中方法可用於塊級、行內快、內聯元素以及文字圖片等。css
- 水平或垂直居中
1.1 text-align
1.2 margin
1.3 line-height
1.4 padding- 水平與垂直同時居中
2.1 擋板方式實現的水平垂直居中
2.2 vertical-align
2.3 模擬單元格特性
2.4 position + margin:負值
2.5 position + margin:auto
2.6 position + translate
2.7 position + calc
2.8 相對於viewport進行水平垂直居中
2.9 css3 - flex- 圖片相關的水平垂直居中
3.1 背景圖方式
3.2 CSS 表達式
3.3 button 方式
3.4 網易NEC - 適合圖片的方式
1. 水平或垂直居中
1.1 text-align
對於要求不高，而且內容是文本元素或是行內塊元素(inline-block)，能夠很容易的經過text-align:center進行水平居中。
示例：html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
background:#eee;
text-align: center;
}
span{
display:inline-block;
background:#aaa;
width: 200px;
}
</style>
</head>
<body>
<div>
使用text-align:center進行水平居中<br/>
<span>inline-block</span>
</div>
</body>
</html>
1.2 margin
對於內容是塊級元素,經過 margin:0px auto 能夠很容易的進行水平居中。
示例：css3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
background:#eee;
text-align: center;
}
p{
background:#aaa;
width:500px;
line-height:100px;
margin:0px auto;
}
</style>
</head>
<body>
<div>
<p>MARGIN:0PX AUTO</p>
</div>
</body>
</html>
| 優勢 | 缺點 |
|---|---|
| 簡單直觀 | 被水平居中的元素必需要有固定的寬度 |
1.3 line-height
對於內容是純文本或者是行內快元素時，最簡單的就是經過設置 line-height 實現垂直居中，不過這種方式有很大的不足之處，一是行高的值必須爲當前父元素的高度，二是，只能一行，不能有多行。express
| 優勢 | 缺點 |
|---|---|
| 簡單直觀 | 只能做用於內聯元素或行內塊、只能一行不能多行、行高的值必須爲父元素的高度 |
1.4 padding
若是父元素對於高度沒有什麼要求，能夠經過設置 padding-top 與 padding-bottom 爲相同值，來實現僞的垂直居中效果。
示例：瀏覽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
padding:200px 0;
background:#eee;
text-align: center;
}
p{
background:#aaa;
}
</style>
</head>
<body>
<div>
<p>PADDING</p>
</div>
</body>
</html>
| 優勢 | 缺點 |
|---|---|
| 很是簡單 | 進行僞垂直居中的元素不能有高度 |
2. 水平與垂直同時居中
2.1 擋板方式實現的水平垂直居中
我稱這種方式爲擋板方式，是由於它在實現方式上很相似。
示例：微信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:600px;
height:600px;
background:#eee;
}
.top{
height:50%;
}
.box1{
width:200px;
height:200px;
background:#aaa;
margin:0px auto;
margin-top:-100px;
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="box1"></div>
</div>
</body>
</html>
| 優勢 | 缺點 |
|---|---|
| 不須要定位 | 依然須要計算與設置負邊距值 要引入一個廢標籤 |
Note： 但在實際的使用上若是不考慮IE7-，那個無用的元素可使用僞類替代。markdown
2.2 vertical-align
vertial-align 是CSS的一個屬性，該屬性只對行內元素或行內快元素產生做用，主要用於設置當前元素與同級相鄰元素的垂直對齊方式(基於基線)。經常使用於圖片與文字的對齊。
這裏則是利用 vertical-align 這種對齊 的特性來在父元素中插入一個高度與其相同的子元素，最後再爲該子元素設置 vertical-align 屬性來對齊咱們真正的內容。
這種方式仍是蠻巧妙的，可是我認爲其侷限性在於只能做用於行內或行內快，另外要插入一個無關的廢標籤，不過該標籤能夠經過僞類進行代替。
最將 text-align:center 與 vertical-align:middle，結合使用，咱們即可以將行內快元素水平垂直居中
示例：函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:300px;
height:200px;
text-align:center;
background:#eee;
text-align:center;
}
div:after{
content:'';
display:inline-block;
width: 1px;
height:100%;
vertical-align:middle;
}
</style>
</head>
<body>
<div>
<button>button1</button>
<button>button2</button>
</div>
</body>
</html>
2.3 模擬單元格特性
咱們知道表格有不少特性，好比寬度的關聯伸縮，再好比咱們如今須要用到的垂直居中，而正好的是CSS也能夠經過display屬性爲HTML元素賦予表格元素的特性。
常見的有：
display:table 聲明一個表格
display:table-row 聲明一個行
display:table-cell 聲明一個單元格。佈局
簡單的使用示例（快速入門）：flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.table{
display:table;
border:1px solid #ccc;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell">ROW1-CELL1</div>
<div class="cell">ROW1-CELL2</div>
</div>
<div class="row">
<div class="cell">ROW2-CELL1</div>
<div class="cell">ROW2-CELL2</div>
</div>
</div>
</body>
</html>
所以利用這種手段，咱們也能夠實現須要的水平垂直居中效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
display:table-cell;
width:500px;
height:500px;
background:#eee;
vertical-align:middle;
text-align: center;
}
p{
display:inline-block;
background:#aaa;
}
</style>
</head>
<body>
<div class="box">
<p>
TABLE-CELL-TEST<br/>
TABLE-CELL-TEST<br/>
TABLE-CELL-TEST<br/>
</p>
</div>
</body>
</html>
| 優勢 | 缺點 |
|---|---|
| 垂直居中多行內容特別是文字內容 | 只有IE8+ 才支持 只能垂直居中內聯元素、行內塊 |
經過模擬表格的方其優勢在於能夠垂直居中多行內容，可是缺點就是目前只有IE8+的版本才被支持。
2.4 position + margin:負值
經過定位能夠實現水平垂直居中，不過對使用的條件要求較高，首先內容要進行絕對定位(absolute)，父元素要進行相對定位(relative)，其次內容要有固定的尺寸，最後調整margin負值與偏移屬性的值。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
position:relative;
height:600px;
width:600px;
background:#eee;
}
p{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
background:#aaa;
}
</style>
</head>
<body>
<div>
<p>MARGIN:0PX AUTO</p>
</div>
</body>
</html>
| 優勢 | 缺點 |
|---|---|
| 應用範圍光 兼容性好 |
進行居中的元素要有固定的尺寸 要計算margin負邊距值 |
2.5 position + margin:auto
對於絕對定位的元素來講,其默認效果是：
- 尺寸會自動收縮適應內容。
- 位置默認的是auto，
- 邊距則默認值爲0。
此時若是在默認尺寸的狀況下，咱們將其四個方向的偏移值都設置爲0的話，元素會自動向四個方向拉伸100%貼合其參照元素。若是再設置固定寬度，並設置 margin:auto,那麼即可以驚奇的發現，絕對定位的元素會水平垂直居中在父元素（參照元素）中。
關於 margin:auto爲何能水平居中塊級而不能垂直居中的問題
auto是自動分配的意思，margin:auto,即是自動分配邊距的意思。可是根據CSS2.1的規範，塊級元素的寬度是參照其父元素的寬度（也就是爲何塊級元素獨佔一行的緣由），只有寬度是100%，auto纔可以進行分配，而後讓元素水平居中，可是問題來了，CSS規範同時也定義了塊級元素的高度是根據內容適應，也就是說塊級元素的高度是不可知的，因此爲上下邊距設置auto固然不能進行垂直居中。然而當咱們給一個元素進行定位，使其成爲塊級元素並脫離文檔流時，又同時爲其設置top:0;right:0;bottom:0;left:0，便會將該元素的尺寸徹底貼合其父元素或參照元素，即width:100%,height:100%,那麼此時再設置margin:auto,即可以進行水平/垂直居中。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
position:relative;
width:600px;
height:600px;
background:#aaa;
}
p{
position:absolute;
width:200px;
height:200px;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<p>This is Position Advace</p>
</div>
</body>
</html>
| 優勢 | 缺點 |
|---|---|
| 使用條件簡單 無需計算負邊距值 |
進行居中的元素要有固定的尺寸 只有IE8+支持 |
2.6 position + translate
經過CSS3的 translate 實現的水平垂直居中，其原理與position+margin負值的方式很相似。
可是相比於margin負值方式，其優勢體現於：
- 不須要爲內容設置固定的寬度。
- 不須要手動計算負邊距值。
transform:translate(-50%,-50%) 能夠自動向左與向上移動當前元素寬度的50%。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
position:relative;
height:600px;
width:600px;
background:#eee;
}
p{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:#aaa;
}
</style>
</head>
<body>
<div>
<p>transForm</p>
</div>
</body>
</html>
| 優勢 | 缺點 |
|---|---|
| 能夠不須要爲居中的盒子設置固定的尺寸 手機端 |
只有IE9+支持 |
2.7 position + calc
calc() 是CSS3的函數屬性，其功能是進行四則運算，參與運算的值能夠是相對單位，也能夠是絕對單位。
利用calc進行居中的原理其實就是經過爲left:50%,top:50%,而後讓50%再減去當前元素寬度或者高度的一半，其機制仍然屬於負邊距方式，但相比於position的負邊距以及於translate等方式，它主要減小了樣式的聲明數量。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
position:relative;
width:600px;
height:600px;
background:#aaa;
}
p{
position:absolute;
width:200px;
height:200px;
left:calc(50% - 100px);
top:calc(50% - 100px);
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<p>CSS3 - CALC</p>
</div>
</body>
</html>
| 優勢 | 缺點 |
|---|---|
| 減小樣式聲明 手機端 |
須要爲居中的元素設置固定尺寸 只有IE9+、Chrome19+ |
2.8 相對於viewport進行水平垂直居中
CSS3中引入了新的度量單位，vh 與 vw，它們都是基於viewport的相對單位，即viewport的寬度與高度分別被分爲100等份的vh 與 vw。
也就是說：
1vh = 1%(viewport的高度)
1vw = 1%(viewport的寬度)
那麼爲當前元素的尺寸設置爲 50vh與50vw 即當前窗口的高度與寬度的一半，再結合 translate(50%,50%) 即可以將當前元素水平垂直居中在當前窗口中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p{
position:absolute;
width:50vw;
height:50vh;
transform:translate(50%,50%);
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<p>CSS3 - CALC</p>
</div>
</body>
</html>
| 優勢 | 缺點 |
|---|---|
| 在基於窗口的環境下使用 | 只有IE9+ 、Chrome26+、Firefox19+、safair6.0+ 支持 固定尺寸 |
2.9 css3 - flex
flex可謂是CSS3加入的強大布局特性，利用flex咱們能夠實現靈活方便且可塑的佈局方案。
利用flex佈局只須要簡單的設置兩行樣式聲明便可實現元素的水平與垂直居中。
justify-content:center 水平居中排列
align-items:center 垂直居中排列
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
display:flex;
justify-content:center;
align-items:center;
text-align: center;
background:#eee;
}
p{
background:#aaa;
}
</style>
</head>
<body>
<div>
<p>FLEX</p>
</div>
</body>
</html>
| 優勢 | 缺點 |
|---|---|
| 移動端 無需設置固定尺寸 |
兼容性低版本IE不支持 |
3 圖片相關的水平垂直居中
專門用於圖片水平垂直居中的CSS方法，而且如下方法均可以在全部瀏覽器中獲得兼容。
3.1 背景圖方式
這種方式最簡單，就是將圖片做爲背景圖，而後設置 background-position:center center 讓其水平垂直居中在元素中。
3.2 CSS 表達式
這種方式要藉助IE的私有擴展，而且這種方式的好處是能夠兼容到IE5。
缺點也很明顯，就是隻能用於圖片，由於這涉及到CSS表達式中的 this.height。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
display:table-cell; /* 在高版本瀏覽器中經過表格特性進行垂直居中圖片 */
width:500px;
height:500px;
vertical-align: middle;
background:#eee;
}
.box img{
display: block;
margin:0px auto;
margin-top:expression((500 - this.height)/2); /* IE 瀏覽器的專有CSS 表達式屬性 */
}
</style>
</head>
<body>
<div class="box">
<img src="http://nec.netease.com/img/s/1.jpg" alt="" />
</div>
</body>
</html>
3.3 button 方式
這種方式有些過濾奇技淫巧，可是好處就是能夠兼容全部瀏覽器，可是在IE瀏覽器中會有稍微的瑕疵，也就是當單擊的時候，圖片會有輕微的晃動。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
button{
height:500px;
width:500px;
background:#eee;
border:none;
outline:none;
}
</style>
</head>
<body>
<button>
<img src="http://nec.netease.com/img/s/1.jpg" alt="" />
</button>
</body>
</html>
3.4 網易NEC - 很適合圖片的方法
這種網易NEC發明的方式，其優勢在於只要圖片的尺寸不超過父元素，圖片都會在父元素中居中。
原理：
首先爲外層盒子進行相對定位，而後爲內部盒子進行絕對定位，而且尺寸是由其內容（圖片）撐開，再爲內部盒子設置偏移值 left:50%;top:50%;最後再將其內部放入兩個img標籤，但引用的都是一張圖片，其中一張圖片進行佔位隱藏用於讓內部盒子識別尺寸，另外一張圖片則是用來顯示，而且這張圖片再進行絕對定位，而後left:-50%;top:-50%，這樣即可以將圖片水平、垂直居中在父元素中。
示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
position:relative;
width: 600px;
height: 600px;
background:#eee;
}
.inner{
position:absolute;
left:50%;
top:50%;
}
.inner .img1{
visibility: hidden;
}
.inner .img2{
position:absolute;
left:-50%;
top:-50%;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<img class="img1" src="http://nec.netease.com/img/s/1.jpg" />
<img class="img2" src="http://nec.netease.com/img/s/1.jpg" />
</div>
</div>
</body>
</html>
呼~~ 終於把博客園的markdown改好了，之後就決定用這個樣式了，感受園子的markdown真心很差用啊，功能也不全。。
若是以爲本文對您有幫助或者您心情好~能夠支付寶(左)或微信(右)支持一下，就當給做者贊助包煙錢了
~~：
- 1. CSS 居中方法集錦
- 2. css居中方法
- 3. CSS居中方法
- 4. [譯]CSS 居中（Center）方法大合集
- 5. CSS垂直居中方法
- 6. css水平居中方法
- 7. css 集錦。
- 8. css中垂直居中的方法
- 9. css中div垂直居中的方法。
- 10. CSS中元素水平居中和垂直居中的方法
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • ☆技術問答集錦（13）Java Instrument原理
- • SpringBoot中properties文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS 居中方法集錦
- 2. css居中方法
- 3. CSS居中方法
- 4. [譯]CSS 居中（Center）方法大合集
- 5. CSS垂直居中方法
- 6. css水平居中方法
- 7. css 集錦。
- 8. css中垂直居中的方法
- 9. css中div垂直居中的方法。
- 10. CSS中元素水平居中和垂直居中的方法