截至 2014 年的常用技術：

---

• Approach 1 -transformtranslateX/translateY:

  此處範例/全螢幕範例

  Insupported browsers(most of them), you can usetop: 50%/left: 50%in combination withtranslateX( -50%) translateY(-50%)to dynamically vertically/horizontally center the element.

  .container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

---

• 方法 2 - Flexbox 方法：

  此處範例/全螢幕範例

  Insupported browsers, set thedisplayof the targeted element toflexand usealign-items: centerfor vertical centering andjustify-content: centerfor horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example#).

  html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; }

---

• Approach 3 -table-cell/vertical-align: middle:

  #此處範例/全螢幕範例

  In some cases, you will need to ensure that thehtml/bodyelement's height is set to100%.

  For vertical alignment, set the parent element'swidth/heightto100%and adddisplay: table. Then for the child element, change thedisplaytotable-celland addvertical-align: middle.

  #For horizontal centering, you could either addtext-align: centerto center the text and any otherinlinechildren elements. Alternatively, you could usemargin: 00 autoassuming the element isblocklevel.

  html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }

---

• Approach 4 - Absolutely positioned50%from the top with displacement:

  此處範例/全螢幕範例

  This approach assumes that the text has a known height - in this instance,18px. Just absolutely position the element50%from the top, relative to the parent element. Useent element. Useent element. Useent element. Useent element. Useent element. a negativemargin-topvalue that is half of the element's known height, in this case --9px.

  html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }

---

• Approach 5 - Theline-heightmethod (Least flexible - not suggested):

  此處範例

  In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set aline-heightvalue on the child element equal to the fixed height of the parent element.

  儘管此解決方案在某些情況下有效，但值得注意的是，當有多行文字時，它不起作用 -像這樣。

  .parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; }

---

方法 4 和 5 並不是最可靠的。選擇前 3 個之一。

如果是一行文字和/或圖像，那麼很容易做到。只需使用：

text-align: center; vertical-align: middle; line-height: 90px; /* The same as your div height */

就是這樣。如果可以是多行的話，那就稍微複雜一點。但http://pmob.co.uk/上有解決方案。尋找“垂直對齊”。

因為它們往往是 hack 或添加複雜的 div...我通常使用帶有單個單元格的表格來完成它...以使其盡可能簡單。

---

2020 年更新：

除非您需要使其在 Internet Explorer 10 等早期瀏覽器上執行，否則您可以使用 Flexbox。它受到目前所有主要瀏覽器的廣泛支援。基本上，容器需要指定為彈性容器，並沿其主軸和橫軸居中：

#container { display: flex; justify-content: center; align-items: center; }

為子項指定固定寬度，稱為「彈性項目」：

#content { flex: 0 0 120px; }

範例：http://jsfiddle.net/2woqsef1/1/

#To shrink-wrap the content, it is even simpler: just remove theflex: ...line from the flex item, and it is automatically shrink-wrapped.

範例：http://jsfiddle.net/2woqsef1/2/

#上述範例已在包括 MS Edge 和 Internet Explorer 11 在內的主要瀏覽器上進行了測試。

One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of works0 ！ and itsimmediatechild elements.There is an alternative method of doing the centering: by not specifying

center

for the distribution on the main and cross axis for the flex container, but instead specifymargin: autoon the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Alsoon works itefon works Internet Explorer 11.

2016 / 2017 年更新：

---

It can be more commonly done with

transform

, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines#

position: relative; top: 50%; transform: translateY(-50%);

範例：https://jsfiddle.net/wb8u02kL/1/

#收縮包覆寬度：

上面的解決方案對內容區域使用了固定寬度。若要使用收縮包裝寬度，請使用

position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -50%);

範例：

https://jsfiddle.net/wb8u02kL/2/

#If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and theline-height

method would work. Otherwise, flexbox would do the job.

##