如何實現fixed居中

一、CSS的position屬性

position屬性是CSS中常用的屬性之一，可以設定元素的定位方式。其中，fixed的定位相當於是絕對定位，但是相對於整個頁面進行定位。因此，可以通過設置fixed的left和top屬性來使元素居中。

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

上述代碼中，通過設置left和top屬性為50%來讓元素水平垂直居中，但是此時元素的左上角並不處於頁面的中心位置，因此還需要使用transform屬性進行調整。其中，translate(-50%, -50%)表示將元素向左向上移動自身寬高的50%，使其處於中心位置。

二、CSS3的flex屬性

CSS3引入了flex布局，是一種非常強大的布局方式，也可以輕鬆實現fixed居中。首先需要在父元素上增加display:flex屬性，然後通過align-items和justify-content兩個屬性將元素居中。

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

上述代碼中，display:flex表示將元素設置為flex布局，align-items:center和justify-content:center表示將元素垂直和水平居中。

三、CSS3的grid屬性

CSS3還引入了grid布局，也可以用於實現fixed居中。首先需要在父元素上增加display:grid屬性，然後使用justify-items和align-items兩個屬性將元素居中。

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

上述代碼中，display:grid表示將元素設置為grid布局，justify-items:center和align-items:center表示將元素垂直和水平居中。

四、JavaScript的計算方法

如果不想使用CSS的屬性，還可以通過JavaScript的方法來計算元素的位置。首先通過getElementById()方法獲取元素的DOM節點，然後通過獲取瀏覽器窗口的寬高以及元素本身的寬高，計算出元素應該處於頁面中心的left和top屬性，並將其應用到元素上。

var element = document.getElementById("fixed-element");
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var elementWidth = element.offsetWidth;
var elementHeight = element.offsetHeight;
element.style.left = (windowWidth - elementWidth) / 2 + "px";
element.style.top = (windowHeight - elementHeight) / 2 + "px";

上述代碼中，先通過getElementById()方法獲取id為fixed-element的元素，然後分別獲取瀏覽器窗口的寬高和元素本身的寬高，並使用計算公式將元素居中。

五、綜合應用

以上幾種方法各有特點，可以根據具體的需求選擇不同的方法。同時，也可以綜合多種方法達到更好的效果，如下所示：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.container ::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -0.25em;
}

.fixed-element {
  display: inline-block;
  vertical-align: middle;
}

上述代碼中，先用flex布局將容器居中，然後使用偽元素創建一個空白元素，將其垂直對齊到中心位置，並將fixed-element元素垂直居中對齊到該空白元素。