一、基本概念

在網(wǎng)頁(yè)開(kāi)發(fā)中，我們經(jīng)常需要將某個(gè)元素固定在屏幕的中央位置，而這種情況下我們就需要使用到固定定位（fixed position）。

固定定位是一種相對(duì)于瀏覽器窗口固定位置的定位，即在任何情況下，該元素的位置都不會(huì)發(fā)生改變。在固定定位下，元素不會(huì)隨滾動(dòng)條的滾動(dòng)而滾動(dòng)。

實(shí)現(xiàn)Fixed居中，就是將固定定位的元素設(shè)置成整個(gè)頁(yè)面的水平垂直居中。

二、實(shí)現(xiàn)方式

實(shí)現(xiàn)Fixed居中有很多不同的方式。下面我們就從以下幾個(gè)方面來(lái)詳細(xì)講解。

三、方法一：使用Flexbox布局

使用Flexbox布局是實(shí)現(xiàn)Fixed居中最簡(jiǎn)單的方式之一。我們可以使用以下CSS代碼：

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

上面的CSS代碼將父容器（.container）設(shè)置成固定定位，然后將其上、左坐標(biāo)都設(shè)置為50%。接著使用transform屬性將其平移至中間。最后使用display屬性將其設(shè)置為Flex布局，然后使用justify-content和align-items屬性將其水平和垂直居中。

四、方法二：使用絕對(duì)定位

使用絕對(duì)定位也是實(shí)現(xiàn)Fixed居中的方法之一。我們可以使用以下CSS代碼：

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 50%;
  background-color: #ccc;
}

上面的CSS代碼同樣將父容器（.container）設(shè)置成固定定位，然后將其上、左坐標(biāo)都設(shè)置為50%。接著使用transform屬性將其平移至中間。

然后，我們將待居中的元素（.box）設(shè)置為絕對(duì)定位，上下左右都設(shè)置為0。然后使用margin屬性將其水平垂直居中，并設(shè)置寬高比例。這樣我們就可以實(shí)現(xiàn)Fixed居中。

五、方法三：使用Grid布局

如果你熟悉Grid布局，那么使用Grid布局也是實(shí)現(xiàn)Fixed居中的方法之一。我們可以使用以下CSS代碼：

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

上面的CSS代碼將父容器（.container）設(shè)置成固定定位，然后將其上、左坐標(biāo)都設(shè)置為50%。接著使用transform屬性將其平移至中間。最后使用display屬性將其設(shè)置為Grid布局，然后使用place-items屬性將其水平和垂直居中。

六、方法四：使用文本對(duì)齊

如果想要在Fixed定位下只居中文本，我們可以使用以下CSS代碼：

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

上面的CSS代碼同樣將父容器（.container）設(shè)置成固定定位，然后將其上、左坐標(biāo)都設(shè)置為50%。接著使用transform屬性將其平移至中間。最后使用text-align屬性將其文本內(nèi)容水平居中。

七、方法五：不使用Flexbox、Grid、文本對(duì)齊

如果你不想使用Flexbox、Grid和文本對(duì)齊，我們還有其他的方式。我們可以使用以下CSS代碼：

.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 50%;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 50%;
  background-color: #ccc;
}

上面的CSS代碼將父容器（.container）的上下左右都設(shè)置為0，然后使用margin屬性將其水平垂直居中，并設(shè)置寬高比例。這樣我們就可以實(shí)現(xiàn)Fixed居中。如果父容器（.container）和待居中的元素（.box）的寬高比例一致，那么我們還可以使用以下CSS代碼：

.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-color: #ccc;
}

上面的CSS代碼將待居中的元素（.box）的上下左右都設(shè)置為0，然后使用transform屬性將其水平垂直居中。這樣我們就可以實(shí)現(xiàn)Fixed居中。