常見佈局方法總結-居中佈局

常見佈局方法總結

水平居中佈局

(1) width: (xxx)px; margin: 0 auto;

使用場景：頁面總體水平居中，有具體寬度要求。

<div class="wrap">
  <div class="content"></div>
</div>

.content {
  width:1000px;
  height:100px;
  background:red;
  margin:0 auto;
}

---

(2) text-align: center; display: inline-block;

使用場景：子元素有多個且須要水平居中排列

<div class="wrap">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

.wrap {
  text-align: center;
}
.content {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

(3) absolute+left:50%+margin-left:-width/2

使用場景：子元素寬度肯定，子元素之間互不影響

<div class="wrap">
  <div class="content">
    快過年了快過年了快過年了快過年了快過年了快過年了快過年了
  </div>
</div>

.wrap {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-left: -100px;
  background: red;
}

(4) absolute+left:50%+translateX(-50%)

使用場景：子元素寬度不肯定，支持css3的translate屬性，子元素之間互不影響

<div class="wrap">
  <div class="content">
    快過年了快過年了快過年了快過年了快過年了快過年了快過年了
  </div>
</div>

.wrap {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  height: 100px;
  background: red;
  transform: translateX(-50%);
}

(5) flex佈局

使用場景: 支持flex佈局方式的瀏覽器均可以使用此佈局，結合了(2)(4)兩種方法的優勢，無需考慮子元素寬度，且支持多個子元素居中

<div class="wrap">
  <div class="content">
    快過年了快過年了快過年了快過年了快過年了快過年了快過年了
  </div>
</div>

.wrap {
  display: flex;
  justify-content: center;
}
.content {
  height: 100px;
  background: red;
}

---

垂直居中佈局

相比水平居中佈局，垂直居中稍微坑了一點，實現方法並無靈活。

(1)table-cell佈局
使用場景：多行文字上下居中

<div class="wrap">
  <div class="content">
    快過年了快過年了快過年了快過年了快過年了快過年了快過年了
  </div>
</div>

.wrap {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
}
.content {
  width: 100px;
  background: red;
}

(2)absolute+top:50%+margin-top:-height/2
使用場景：與水平居中同樣，適用於子元素高度肯定，不會對其餘子元素形成影響的狀況下的上下居中,因爲是絕對定位，父元素須要佔據空間，若沒有其餘子元素，需設置一個高度

.wrap {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  top: 50%;
  width: 300px;
  height: 100px;
  margin-top: -50px;
  background: red;
}

(3) absolute+top:50%+translateY(-50%)
使用場景：與水平居中同樣，適用於子元素高度不肯定，不會對其餘子元素形成影響的狀況下的上下居中,因爲是絕對定位，父元素須要佔據空間，若沒有其餘子元素，需設置一個高度

.wrap {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  top:50%;
  background: red;
  transform: translateY(-50%);
}

(4) flex佈局

使用場景: 支持flex佈局方式的瀏覽器均可以使用此佈局，無需考慮子元素高度，書寫簡便快捷

<div class="wrap">
  <div class="content">
    快過年了快過年了快過年了快過年了快過年了快過年了快過年了
  </div>
</div>

.wrap {
  display: flex;
  align-items: center;
  height: 200px;
}
.content {
  background: red;
}