2015年4月15日

[筆記] CSS垂直置中的方法

      ,  
css
在學習網頁排版的過程中，置中（不論垂直或水平）一直是個相當麻煩的事，關於CSS中置中的方式，網路上可以找到非常多，這裡的整理算是我自己的一個筆記吧，如果內容有問題在麻煩告知。
以下是之後示範中 HTML Body 的部分：
<div class="outer">
  <div class="inner">
    <p>要置中的內容</p>
  </div>
</div>
後面則是搭配上不同的CSS作為展示。

文字的垂直置中方法

flex（推薦）

Flex 在瀏覽器的支援度已經相當普及，除非有需要支援 IE 的使用，不然基本上都可以安心使用了，簡單好用：
邏輯：display: flex 搭配 align-items: center 即可將裡面的元素達到垂直置中的效果。
.outer {
  background-color: #95afba;
}
.inner {
  background-color: #d5e1a3;
  display: flex;          /* ★ */
  height: 300px;
  align-items: center;    /* ★ */
}

line-height（常用）

很好用的方法，就是設定div的高度和文字高度一樣，就可以簡單達到垂直置中的效果。
邏輯：當DIV區塊的高度等同於文字行高的，文字就會被放在中間。
.outer {
  background-color: #95afba;
}
.inner {
  background-color: #d5e1a3;
  height: 300px;          /* ★ */
  line-height: 300px;     /* ★ */
}
效果如下：
imgur

table（少用）

邏輯：把要垂直置中的內容當作是 table 來操作，所以可以用 vertical-align 的指令。
.outer {
  background-color: #95afba;
  display: table;     /* ★ */
  height: 300px;
}
.inner {
  background-color: #d5e1a3;
  display: table-cell;      /* ★ */
  vertical-align: middle;   /* ★ */
}

inline-block + vertical-align（少用）

透過這個方法，我們可以將多行文字也做一個垂直置中，這個方法也可以用來幫區塊作垂直置中：
.inner {
  background-color: #95afba;
  height: 400px;
  font-size: 0;
}
.inner:before {
  content: "";    /* ★ */
  height: 100%;   /* ★ */
  display: inline-block;  /* ★ */
  vertical-align: middle; /* ★ */
}
p {
  display: inline-block;  /* ★ */
  vertical-align: middle; /* ★ */
  font-size: 1rem;
}

padding

在下面文章一起進行說明。

區塊（div）的垂直置中方法

flex（建議）

邏輯：display: flex 搭配 align-items: center 即可將裡面的元素達到垂直置中的效果。
.outer {
  background-color: #95afba;
  position: relative;   /* ★ */
  height: 400px;
  display:flex;         /* ★ */
  align-items: center;  /* ★ */
}

.inner {
  background-color: #d5e1a3;
  height: 100px;
}

Position + Transform（常用）

這個方法是利用絕對定位 absolute 的方式，搭配上 transform 來操作。
這個想法的概念是這樣，首先先用 absolute 來做絕對定位，當我輸入 top: 50% 時，這個 <div> 的左上角，會被移到高度為 50% 的地方。
但這樣並沒有真的把 div 區塊置中，因為它超過了，所以我們需要搭配上 transform 的屬性，透過負值的方法把它往上調，而往上調的高度就是這個 div 元素高度的一半，所以使用 translate(-50%) ，這時候，這個 inner div 就會被垂直置中了。
邏輯：先利用 position: absolute 把 top: 50% 設在 50%；接著再透過 transform: translateY(-50%) 把超過的部分修正回來，達到垂直置中。
.outer {
  background-color: #95afba;
  position: relative;   /* ★ */
  height: 400px;
}
.inner {
  background-color: #d5e1a3;
  position: absolute;   /* ★ */
  top: 50%;             /* ★ */
  height: 100px;
  transform: translateY(-50%);    /* ★ */
}
css

Position + Margin

這個方法會設定 top 和 bottom 的位置，讓它不可能符合，再透過 margin 的方式，讓它變成垂直置中。
這個方法同時設定 top 和 bottom 為 0，使得 inner div 完全不可能符合，最後再透過 margin 這個指令，讓它達到垂直置中的效果。
類似的方法，也可以讓它達到水平置中，只要在 inner 的地方，多加上left:0; right:0，就可以達到水平置中。
.outer {
  background-color: #95afba;
  position: relative;   /* ★ */
  height: 400px;
}

.inner {
  background-color: #d5e1a3;
  height: 100px;
  width: 100px;
  position: absolute;   /* ★ */
  top: 0;         /* ★ */
  bottom: 0;      /* ★ */
  margin: auto;   /* ★ */
}

padding

當我們的 div 沒有設定高度時，我們可以透過 padding 的指令來達到垂直置中的效果。
邏輯：透過上下都增加 100px 的 padding 就可以，讓 inner 這個區塊達到垂直置中的效果。
inner 也可以透過加上 padding: 50px 0，這樣的方式，來達到裡面也垂直置中的效果，而且也可以達到文字的垂直置中。
.outer {
  background-color: #95afba;
  padding: 100px 0;   /* 上下都增加 100px 的padding */
}
.inner {
  background-color: #d5e1a3;
  width: 100px;
}

:before + inline-block（少用）

這個方法，透過CSS當中的偽元素（:before）加上 inline-block 來達到這樣的效果。
想法：在 outer 的前面加上一個偽元素，同時要 inline-block 的方式來呈現，這樣就可以再透過vertical-align 來加以置中。
如果 inner 這個 div 想要水平置中的話，可以在 outer 的地方加上 text-align:center 就可以達到水平置中的效果了。
.outer {
  background-color: #95afba;
  height: 400px;
  text-align:center;    /* 如果要水平置中 */
}

/* ★ */
.outer:before { 
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.inner {
  background-color: #d5e1a3;
  width: 100px;
  height: 100px;
  display: inline-block;  /* ★ */
  vertical-align: middle; /* ★ */
}

參考資料

1 則留言: