CSS實現居中的7種方法
實現HTML元素的居中 看似簡單,實則不然
水平居中比如容易,垂直居中比較難搞定,水平垂直都居中更不容易。在這個響應式佈局的年代,很難固定元素的寬高,俺統計了一下,目前的幾種方法。本文由淺入深逐個介紹,使用了同一段HTML程式碼:
<div class="center">
<img src="jimmy-choo-shoe.jpg" alt="">
</div>
下面鞋子圖片會變化但原始大小始終是500px × 500px,主題背景顏色使用了HSL colors
1.水平居中—使用 text-align
有些場景下 簡單的方法就是最好的方法
div.center { text-align: center; background: hsl(0, 100%, 97%); }
div.center img { width: 33%; height: auto; }
但該方法不能讓圖片垂直居中:需要給 div 新增 padding 或 給 div 中的元素新增 margin-top
和 margin-bottom
2. margin: auto 居中
同樣也是水平居中,侷限性跟第1種方法一樣:
div.center { background: hsl(60, 100%, 97%); }
div.center img { display: block; width : 33%; height: auto; margin: 0 auto; }
注意 display: block
,
這種情況下必須有 margin:
0 auto
.
3. table-cell 居中
使用 display:
table-cell
, 可以實現水平垂直都居中。通常需要新增一個額外的空元素。
<div class="center-aligned">
<div class="center-core">
<img src="jimmy-choo-shoe.jpg">
</div>
</div>
CSS 程式碼:
.center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; }
.center-core { display: table-cell; text-align: center; vertical-align:middle; }
.center-core img { width: 33%; height: auto; }
注意 width: 100%
是為了防止 div
摺疊,外面的容器需要一個高度才能垂直居中。
如果垂直居中的元素是放在 . body 中的話,需要給 html
和 body
設定
height. 在所有瀏覽器中均有效,包括 IE8+.
4. Absolute 居中
最近 Stephen Shaw 推廣的一項新技術可以很好地相容各種瀏覽器。唯一的缺點是外部容器必須宣告height
.absolute-aligned {
position: relative; min-height: 500px;
background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
width: 50%;
min-width: 200px;
height: auto;
overflow: auto; margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Stephen 在 他的文章 中驗證了這段程式碼的許多版本
5. 使用 translate 居中
Chris Coiyer 提出了一個新的方法:使用 CSS transforms. 同時支援水平居中和垂直居中:
.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; }
.center img { position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); width: 30%; height: auto; }
有以下缺點:
- CSS transform 需要針對不同的瀏覽器使用 特定的字首 (-moz 或 -o 或 -webkit)
- 在低版本的IE (IE8 及以下 )中無效
- 外部容器需要設定高度 height (or gain it in some other way) 因為它不能從它的absolutely-positioned 內容上獲得高度.
- 如果內容包含 text, 當前瀏覽器合成技術對文字解釋得很模糊.
6. 使用 Flexbox 居中
一旦屬性變數和特定字首消失的話,這種方法很可能成為首選的居中方案.
.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; }
.center img { width: 30%; height: auto; }
在許多方面 flexbox 是最簡單的解決方案,但制約因素是
各種陳舊語法和低版本的IE, (儘管 display:
table-cell
是一個可以接受的方案). 完整的 CSS程式碼:
.center { background: hsl(240, 100%, 97%);
display: -webkit-box; /* OLD: Safari, iOS 6 and earlier; Android browser, older WebKit */
display: -moz-box; /* OLD: Firefox (can be buggy) */
display: -ms-flexbox; /* OLD: IE 10 */
display: -webkit-flex; /* FINAL, PREFIXED, Chrome 21+ */
display: flex; /* FINAL: Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
現在規範已經形成,瀏覽器也支援, I have written extensively on flexbox layout and its uses.
7. 使用 calc 居中
在某些場景下比 flexbox 更通用:
.center { background: hsl(300, 100%, 97%); min-height: 600px; position:relative; }
.center img { width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); }
顯而易見, calc
允許在當前的頁面佈局上進行計算。在上面的例子中,50%
是容器中元素的中間點,但是單獨使用會使得image的左上角位於<div>
中間。我們需要把width
和height 再往回拉一下,大小分別是圖片width
和height 的一半。表示式如下:
top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));
在目前的瀏覽器中,你可以發現:當內容 fixed 且大小已知的時候,該技術效果最佳:
.center img { width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }
calc
這種方法跟
flexbox 一樣也有很多潛在的缺點: 支援Firefox 4 及更高版本瀏覽器,對於更早版本的瀏覽器,需要新增字首,不支援IE8。圖片居中的完整程式碼:
.center img { width: 40%; height: auto; position: absolute;
top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%);
top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%);
top: calc(50% - 20%); left: calc(50% - 20%); }
當然還有很多其他的方法,例如 使用偽元素來垂直居中 , 理解這些技術可以讓web開發人員在處理居中問題的時候不麻爪!