CSS頁面居中

一、水平居中

在實際開發中，我們經常會需要將一個元素水平居中，有如下三種方法可以實現。

1、text-align:center

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

在父元素中設置text-align:center，在子元素中設置display:inline-block，即可使子元素水平居中。

2、margin:auto

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

這種方法需要將子元素設置為絕對定位，然後通過將左邊距設置為50%，再通過transform屬性向左移動自身寬度一半的距離，使子元素水平居中。

3、flex布局

.parent {
  display: flex;
  justify-content: center;
}
.child {
  /* 可以省略 */
}

使用flex布局，將父元素設為flex容器，設置justify-content屬性為center即可使子元素水平居中。

二、垂直居中

同樣地，我們也需要將一個元素垂直居中，有如下三種方法可以實現。

1、line-height

.parent {
  height: 200px;
  line-height: 200px;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

在父元素中設置height和line-height為相同的值，再將子元素設置為inline-block，然後通過vertical-align屬性設置為middle，即可使子元素垂直居中。

2、position+transform

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

同樣也需要將子元素設置為絕對定位，將上邊距設置為50%，再通過transform屬性向上移動自身高度一半的距離，使子元素垂直居中。

3、flex布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  /* 可以省略 */
}

使用flex布局，將父元素設為flex容器，設置align-items屬性為center即可使子元素垂直居中。

三、水平垂直居中

如果想要將一個元素水平垂直居中，可以結合以上方法進行實現。

1、position+transform

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

將子元素設置為絕對定位，將左邊距和上邊距分別設置為50%，再通過transform屬性向上和向左移動自身寬高的一半距離，即可使子元素水平垂直居中。

2、flex布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  /* 可以省略 */
}

設置父元素為flex容器，同時將justify-content和align-items屬性都設置為center，即可實現水平垂直居中。