前言

學(xué)習(xí)有什么捷徑嗎漾肮？ 沒有厂抖，不過(guò)就是枯燥乏味的重復(fù)，重復(fù)克懊，再重復(fù)忱辅，然后積累到一定程度七蜘，自然就水到渠成

水平居中

內(nèi)聯(lián)元素

通過(guò)使用text-align實(shí)現(xiàn)，運(yùn)用在塊級(jí)元素中的text-align會(huì)使其包含的內(nèi)聯(lián)元素水平對(duì)齊

<div class="container">
    <span class="content">水平居中</span>
</div>
.container {
  text-align: center;
}

塊級(jí)元素

塊級(jí)元素要實(shí)現(xiàn)水平居中可以通過(guò)是用margin實(shí)現(xiàn)墙懂，塊級(jí)元素寬度和高度已知橡卤，可以通過(guò)將元素的左右margin設(shè)置為auto

  <div class="container">
    <div class="content">水平居中</div>
  </div>
.content {
      margin: auto;
}

通用

Flex布局

在 Flex 布局中，justify-content可以用于設(shè)置彈性盒子元素在主軸方向上的對(duì)齊方式损搬。當(dāng)其屬性值為 center 時(shí)碧库，其子元素整體會(huì)在主軸的中心位置

.contanier {
      display: flex;
      justify-content: center;
}

Grid布局

在 Grid 布局中，justify-content 屬性會(huì)沿著行軸線（水平方向） 在網(wǎng)格容器中對(duì)齊網(wǎng)格巧勤。當(dāng)屬性值為center時(shí)嵌灰，就可以將網(wǎng)格對(duì)齊到網(wǎng)格容器的水平居中位置

.contanier {
      display: grid;
      justify-content: center;
}

絕對(duì)定位

可以通過(guò)將使用絕對(duì)定位和變換實(shí)現(xiàn)元素的水平居中

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

如果塊元素的寬度已知，也可以使用負(fù)邊距來(lái)代替transform

.container {
  position: relative;
}
.content {
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

垂直居中

塊級(jí)元素

不定寬高元素颅悉，可以通過(guò)使用絕對(duì)定位和變換實(shí)現(xiàn)元素的垂直居中

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

如果塊元素的高度已知伞鲫，可以使用負(fù)邊距來(lái)替代 transform

.container {
  position: relative;
}
.content {
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

通用

Flex 布局

在 Flex 布局中，align-items 屬性用來(lái)定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式签舞。當(dāng)其屬性值為 center 時(shí)秕脓，元素位于容器的中心。

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

Grid布局

使用 CSS Grid 布局中儒搭，可以使用 align-content 屬性將項(xiàng)目垂直居中到其網(wǎng)格區(qū)域

.container {
  display: grid;
  align-content: center;
}

水平垂直居中

使元素垂直居中最通用的方法就是使用絕對(duì)定位和transform

.container {
  position: relative;
}

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

如果元素的高度和寬度已知吠架，也可以使用margin來(lái)代替transform

.container {
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

Flex布局

在使用 Flex 布局時(shí)，可以結(jié)合上面的水平和垂直居中來(lái)實(shí)現(xiàn)水平垂直居中

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

Grid布局

在 Grid 布局中搂鲫，可以使用以下形式來(lái)實(shí)現(xiàn)元素的水平垂直居中

.container {
    display: grid;
    place-items: center;
}