層疊樣式表/居中
對具有定義寬度的元素使用 margin: 0 auto 來水平居中塊級容器
在 HTML 郵件中，對具有定義寬度的元素使用 margin-left:auto; margin-right:auto; 代替 margin:0 auto; 來水平居中塊級容器
在符合標準的瀏覽器中，使用 margin: 0 auto; display: table; 來水平居中未定義寬度的內容
在 IE6 和 IE7 中，對容器使用 text-align: center;，對塊元素使用 text-align: left, display:inline-block, 和 display:inline（在單獨的宣告中觸發 hasLayout）來水平居中未定義寬度的內容。
在跨瀏覽器中，對容器使用 text-align: center，對包裝 div 使用 display:inline-block(-moz-inline-box 用於 Firefox 2)，對內容 div 使用 display:inline 來水平居中未定義寬度的內容。
在隨後的 IE 特定宣告中將包裝 div 設定為 display:inline 以觸發 hasLayout。
在隨後的宣告中將內容 div 設定為 display:-moz-inline-box 以觸發 Firefox 2 的實驗性佈局。
如果居中的內容換行，請對包裝 div 使用 width:99% 以避免在 Firefox 3+ 和 Webkit 瀏覽器（Safari、Iron、Chromium、Chrome 等）中出現問題。在 Firefox 2 中，在包裝器中新增一個固定寬度的 div 來解決這個問題。最終的跨瀏覽器 CSS 遵循這種模式
.container { text-align:center; }
/* Use width of less than 100% to avoid Firefox 3+ and Webkit wrapping issues */
.wrapper { width: 99%; }
/* Use inline-block for wrapper and placeholder */
.wrapper { display:-moz-inline-box; display: inline-block; }
.ie67 .wrapper, .content { display:inline; }
.content { display:-moz-inline-box; }
<!--[if lte IE 7]>
<body class="ie67">
<![endif]-->
<![if (!IE) | (gt IE 7 )]>
<body>
<![endif]>
<div class="container">
<div class="content">
<div class="wrapper">
<div>fff</div>
<div>ggg</div>
</div>
</div>
</div>
在符合標準的瀏覽器中，對容器使用 display: table; height: 100%;，對內容使用 display: table-cell; vertical-align: middle; 來垂直居中未定義高度的內容。如果容器是 body 的第一個子元素，則對 html 和 body 標籤也使用 height:100%;
在 IE6 和 IE7 中，對容器使用 position: relative; top: 50%;，對內容使用 position: absolute; top: -50% 來垂直居中未定義高度的內容
使用與容器高度相同的行高來垂直居中影像。在 IE6 和 IE7 中也使用與容器高度相同的字型大小。
使用 position:relative; 和 top:-50%; left:-50%; 來居中具有未定義寬度和高度的內容，該內容位於具有定義寬度和高度的絕對定位容器內
對 html 標籤、body 標籤、容器和一個空佔位符元素使用 height:100%，對內容和佔位符使用 display:inline-block; (-moz-inline-box 用於 Firefox 2) 和 vertical-align: middle 來跨瀏覽器垂直居中未定義高度的內容。如果在容器內新增一個空的內聯塊元素（例如 span），併為其分配 height: 100%; vertical-align: middle，那麼它將允許我們精確地獲得我們想要的東西：一個具有所需高度的行框。佔位符元素被賦予 100% 的高度來支撐行框，以便 vertical-align: middle 具有預期的效果。這將避免由於跨瀏覽器支援 display:table 比 display:inline-block 差而導致的上述 IE 特定相對定位解決方法。如果內容是塊元素，則在單獨的宣告中為 IE6 和 IE7 新增 display:inline 以觸發 hasLayout 行為。最終的跨瀏覽器 CSS 遵循這種模式
html, body, #container, #placeholder { height: 100%; }
#content, #placeholder {
display:inline-block;
vertical-align: middle;
}
*#content{display:inline;}
<div id="container">
<div id="content">
Vertically centered
</div>
<span id="placeholder"></span>
</div>
使用上述垂直居中模式，對內容 div 使用 display:inline，對額外的巢狀包裝 div 使用 display:inline-block，以便在 Firefox、Safari 和 Chrome 中垂直居中圖片庫（IE 或 Opera 不需要更改）。確保包裝器的寬度小於 100%，以避免這些瀏覽器中的內聯塊錯誤。以下是在跨瀏覽器中的模式
html, body, .container, .placeholder { height: 100%; }
img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; }
/* Use width of less than 100% for Firefox and Webkit */
.wrapper { width: 99%; }
.placeholder, .wrapper, .content { vertical-align: middle; }
/* Use inline-block for wrapper and placeholder */
.placeholder, .wrapper { display: inline-block; }
.ie67 .wrapper, .content { display:inline; }
<!--[if lte IE 7]>
<body class="ie67">
<![endif]-->
<![if (!IE) | (gt IE 7 )]>
<body>
<![endif]>
<div class="container">
<div class="content">
<div class="wrapper">
<img src="http://microsoft.com/favicon.ico">
<img src="http://mozilla.com/favicon.ico">
<img src="http://webkit.org/favicon.ico">
<img src="http://userbase.kde.org/favicon.ico">
<img src="http://www.srware.net/favicon.ico">
<img src="http://build.chromium.org/favicon.ico">
<img src="http://www.apple.com/favicon.ico">
<img src="http://opera.com/favicon.ico">
...
...
</div>
</div>
<span class="placeholder"></span>
</div>
指定行高與包含元素的高度相同，以垂直居中內聯文字
使用 margin-top: xxx（其中 xxx 等於容器 div 的高度減去居中元素的高度）。將此值除以二，即可垂直居中塊元素
使用 margin-left: xxx（其中 xxx 等於容器 div 的寬度減去居中元素的寬度）。將此值除以二，即可水平居中塊元素
使用 top: 50% 和 margin-top: -xxx（其中 -xxx 等於定義高度的一半，以畫素為單位）來垂直居中絕對定位的內容
使用 left: 50% 和 margin-left: -xxx（其中 -xxx 等於定義寬度的一半，以畫素為單位）來水平居中絕對定位的內容
使用具有 display:inline-block 和 top:-50%; left:-50% 的 rel pos span，以及比 abs pos 父元素更高的 z-index，以在 abs pos 容器內居中內容。這利用了 IE 中的一個錯誤，即容器的計算高度用於定位，而不是它的高度值
使用 vertical-align 在同一行上居中影像和文字。如果 top、middle 或 bottom 不一致，請使用畫素或百分比值。sub、super、text-top 或 text-bottom 值對於跨瀏覽器一致性不可靠