使用 CSS 轉換

Created: November-22, 2018

CSS 變換基於元素的大小，因此如果你不知道元素的高度或寬度，可以將它從相對容器的頂部和左側絕對定位 50％並將其向左和向上平移 50％使其垂直和水平居中。

請記住，使用此技術，元素可能會在非整數畫素邊界處渲染，使其看起來模糊。請參閱 SO 中的此答案以獲取解決方法。

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

檢視 JSFiddle 中的示例

交叉瀏覽器的相容性

transform 屬性需要舊版瀏覽器支援的字首。Chrome <= 35，Safari <= 8，Opera <= 22，Android Browser <= 4.4.4 和 IE9 需要字首。IE8 和舊版本不支援 CSS 轉換。

以下是上一個示例的常見轉換宣告：

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

有關更多資訊，請參閱 canIuse 。