如何只用CSS做到完全居中

我們都知道 margin:0 auto; 的樣式能讓元素水平居中，而 margin: auto; 卻不能做到垂直居中……直到現在。

transform法

和「完全居中」法的好處一樣，簡單有效，同時支援可變高度。為內容指定帶有廠商字首的transform: translate(-50%,-50%)和top: 50%; left: 50%;樣式就可以讓內容塊居中。

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>
title
>
6<
style 
type
="text/css"
>
7.parent
8.child
18style
>
19head
>
20<
body
>
21<
div 
class
="parent"
>
22<
div 
class
="child"
>
div>
23div
>
24 注意: <
br>
25 好處:內容高度可變,並且**量小<
br>
26 缺點:不支援 ie8 需要些產商字首 會和其他transform樣式有衝突 某些情況下的邊緣和字型渲染會有問題<
br>
27body
>
28html
>

好處：同時注意：

table-cell法

這種可能是最好的方法，因為高度可以隨內容改變，瀏覽器支援也不差。主要缺陷是會產生額外的標籤，每乙個需要居中的元素需要三個額外的html標籤。

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>table-cell方法
title
>
6<
style 
type
="text/css"
>
7.center-container.is-table
8.is-table .table-cell
9.is-table .center-block
10style
>
11head
>
12<
body
>
13<
div 
class
="center-container is-table"
>
14<
div 
class
="table-cell"
>
15<
div 
class
="center-block"
>
16 table-cell方法:<
br/>
17 優點:內容高度可變 內容溢位則能自動撐開父元素高度 瀏覽器相容性好<
br/>
18 缺點:需要額外的 html 標籤 <
br/>
19div
>
20div
>
21div
>
22body
>
23html
>

好處：同時注意：

CSS中的居中 完全指導

水平居中 horizontally 1.行內元素 text align center 2.單個塊級元素 你可以設定乙個塊級元素居中，如果你已經設定了這個塊元素的寬度 width 的話，設定其margin left和margin right為auto就可以。如果你沒有設width，塊級元素通常會佔滿其...

居中的css 完全指南 翻譯

譯自 對於行內元素可以使用如下實現水平居中 blocklist1 1這種方法對於inline，inline block，inline table等都有效。對於乙個塊元素，可以設定其margin left和margin right自動 blocklist1 2 div1無論塊元素的寬度是否已知，都可以...

居中的css 完全指南 翻譯

blocklist1 1這種方法對於inline，inline block，inline table等都有效。blocklist1 2 div1無論塊元素的寬度是否已知，都可以實現水平居中。blocklist1 3 div1 blocklist1 3 div1 div.blocklist1 3 di...