本文為參加第 11 屆「iT 邦幫忙鐵人賽」系列文章，會優先在部落格發文，再貼到 iT 邦幫忙。如果文章對您有幫助，歡迎到 iT 邦幫忙給我一個訂閱與肯定 ^___^。

好久沒寫文了，也希望自己可以堅持 30 天，加油（握拳

昨天講了 text-align 以及 vertical-align 這兩個常見的對齊語法，但他們可以對齊的範圍都比較小，偏向對齊元件，而非版面。

如果要讓版面置中，或是再更複雜的一些排版，我們還可以有更多選擇。

版面置中的好幫手: margin

這個應該很多人都用到爛掉了，但有的朋友可能不太懂原理，在此簡單介紹一下。

我們在切一個大版面時，如果要讓他左右置中，現在普遍最快的方法是使用以下語法，然後版面就可以置中：

.container {
  width: 1200px;
  margin: 0 auto;
}

margin: 0 auto; 是 margin: 0 auto 0 auto; 的簡寫，表示上下邊界為 0 ，左右為 auto 表示自己均分。margin 會去判斷 .container 的寬度以及螢幕的寬度，相減之後除以 2 就是左右邊界的數值了。

至於該如何得到 .container 的寬度呢？就是要在 CSS 寫上寬度，如果沒寫寬度是不會有效果的。

margin 大到版面，小到元件，只要有指定元素的寬度，幾乎都可以用這個方法左右置中。

.row {
  width: 500px; 
  margin: 0 auto; 
  &::after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
} 

.row__container { 
  width: 50%; 
  float: left; 
} 

.col { 
  width: 60%; 
  margin: 0 auto; 
}

更多的 margin

☞ 圖片一樣可以使用 margin: 0 auto; 置中
☞ margin 可以讓版面置中，但沒辦法讓文字置中。

讓 padding 幫你實現簡單的垂直置中

如果說 margin 是負責版面，那 padding 就是負責裡面的元素了。

我們可以利用 padding 將 Box Model 往外推的特性，做到置中的效果，只要上下數值一樣就可以囉。

.row {
  padding: 4em 0;
  width: 500px;
  text-align: center;
}

選單文字垂直置中的首選 line-height

▼ 假設今天要製作一個類似這樣的選單，文字需要垂直置中，同時又有限定元素的高度。

因為有限定高度，所以我們沒辦法用 padding 去推 Box Model；另外一個原因是，如果選單再複雜一點，padding 通常都另有用途。

所以假設今天需求是：

• 有限定元素高度
• 文字需垂直置中
• 文字非常單純只有一行

在上述的情況下，可以直接用 line-height 解決，只要讓 line-height 跟 height 高度相同即可

.menu__item { 
  height: 30px; 
  line-height: 30px; 
}

用 position 或 flex 讓你的版面水平垂直置中

我之前已寫過 position 的解法，有興趣的朋友請參考以下文章。

另外我也有在裡面新增了使用 flex 的方法，歡迎點擊閱讀。

用 transform 做出與 position 類似的置中效果

transform 與 position 類似，都是直接將 Box Model 推移到特定的位置上，達到置中的效果。

使用 position 可以再利用 margin 去推算要定位的位置，但前提是你必須要知道元素的寬跟高，才有辦法回推。

但使用 position 加 transform 就不用特別指定寬跟高，非常的方便

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

相關文章

話說鐵人賽我沒有堅持下去，就只寫了兩篇，然後就沒有然後了(炸)

上篇是針對 vertical-align 做了詳細的介紹，有興趣想知道該怎麼使用 vertical-align 做到垂直置中的話，可以參考看看唷

2

發生錯誤。