垂直置中

發表於 | 分類於

有段時間沒有做切版練習，複習語法和參考他人總結並用紀錄的方法加深印象，編輯版面時，常常會依照需求作版面配置，會需要做不同的水平置中與垂直置中。

水平置中的處理方式:

  • 行內元素(inline-level)的內容與圖像可以使用 text-align: center;
  • 區塊元素(block-level)有設定 width 的狀況下可以使用 margin:0 auto;

垂置置中處理方式:

  • 行高 line-height (inline-level)
  • 偽元素(before、after) + display:inline-block
  • Flexbox，設置 display:flex； 操作 block level 元素。
  • 表格父層 table，子層 table-cell
  • calc
  • 絕對定位

line-height

使用於單行的行內元素，ex: 標題。設定主要設置在父層

/* 父層 */
div {
  width: 200px;
  height: 200px;
  line-height: 100px; // 設置高度一半，達到垂直置中。
  text-align: center; // 行內元素水平置中。
}
/* 子層 */
.child {
  display: inline-block; // 設置為 inline-block
  width: 20px;
  height: 20px;
}

偽元素(before、after) + display:inline-block

vertical-align 使元素內所有行內元素垂直位置互相置中。所以必須有一個元素設置 height:100%; 其他同層元素才能夠實現垂直置中。

/* 父層 */
div {
  width: 200px;
  height: 200px;
  text-align: center; // 行內元素水平置中。
}
/* 子層 */
.child0 {
  width: 20px;
  height: 20px;
  height:100%; // 其中一個要設定高度。
  display:inline-block; 
  vertical-align: middle; // 影響本身是 inline-level 的元素。
}
.child1 {
  width: 20px;
  height: 20px;
  display:inline-block;
  vertical-align: middle; // 影響本身是 inline-level 的元素。
}

為了方便使用偽元素 ::before、::after

div::before {
  content: '';
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

Flexbox

將父層設置為 flex，操作影響子層排版。

div {
  display: flex; // 設定 flex 。
  width: 200px;
  height: 200px;
  align-items: center; // 水平置中。
  justify-content: center; // 垂直置中。
}
.child {
  width: 20px;
  height: 20px;
}

table-cell

模擬表格的方式完成垂直置中

ex1

/* 父層 */
.table {
  display: table;
  width: 100%;
}
.table-cell {
  display: table-cell;
  vertical-align: middle; // 垂直置中
}
/* 子層 */
.child {
  margin: 0 auto;
}

ex2

/* 父層 */
.table {
  display: table;
  width: 100%;
}
.table-cell {
  display: table-cell;
  width: 200px;
  height: 200px;
  vertical-align: middle; // 垂直置中
}
/* 子層 */
.child {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  text-align: center; // 如果 child 有行內元素或文字可以使用
}

calc

使用 calc 的元素必須是 block level element，設置 top 屬性，距離的計算 = div 外框高度 + div 高度。

ex1: top: 50% 扣除 div height / 2

  1. top: calc(50% - (height / 2))
  2. top: 50%; margin-top: -(height / 2);
  3. top: 50%; transform: translateY(-50%)
    div {
      width: 200px;
      height: 200px;
    }

    .child1 {
      width: 20px;
      height: 20px;
      position: relative; //使用 top、 left
      top: calc(50% - 10px); // 50% - height / 2
    }

    .child2 {
      width: 20px;
      height: 20px;
      position: relative; //使用 top、 left
      top: 50%;
      margin-top: -10px;
    }

    .child3 {
      width: 20px;
      height: 20px;
      position: relative; //使用 top、 left
      top: 50%;
      transform: translateY(-50%);
    }

絕對定位

利用 position: absolute; 固定位置。父元素要設定為 position: relative;，設定 top、bottom 再加上 margin: auto 完成置中。

div {
  width: 200px;
  height: 200px;
  position: relative;
}
.child {
  width: 20px;
  height: 20px;
  position: absolute; //絕對定位前置設置 top bottom 為 0 。
  top: 0;
  bottom: 0;
  left: 0; //水平左。
  right: 0; //水平右。
  margin: auto; //置中。
}

參考:

從行內元素與區塊元素處理垂直置中

參考: