CSS Vertical Align

CSS 垂直置中的作法

  • CSS 垂直置中的七個方法（文章日期：2015.02），http://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html

    • 將行高(line-height)設定的和容器高度一樣

      • 適用於 inline、inline-block 元素

      • 僅適用於單行

      • div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

    • 上個作法的改良版，可適用多行（可能效果不符想像？）

    • div {
  height: 200px;      /* 高度和行高一樣 */
  line-height: 200px; /* 高度和行高一樣 */
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;  /* 設為 inline-block */
  vertical-align: middle; /* 設為對齊中間 */
  line-height: normal;    /* 把 span 的 line-height 恢復 */
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

    • 增加 ::before 或 ::after 偽元素

      • 原理說明：vertical-align 的作用是讓容器內的所有元素互相參考而垂直置中，而非參考容器高度來垂直置中

      • 幫容器加上一個看不見、高度和容器一樣的偽元素

      • 適用於各種未知的高度寬度

      • IE 7 不支援

      • /* Source：https://css-tricks.com/centering-in-the-unknown/ */

/* This parent can be any width and height */
.block {
  text-align: center;

  /* 非必要。May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';            /* 無內容 */
  display: inline-block;  /* 記得要改成 inline-block */
  height: 100%;           /* 高度直接 100% */
  vertical-align: middle; /* 設為對齊中間 */
  margin-right: -0.25em;  /* 非必要。Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
}

    • 用 calc 手動算距離

      • 公式

        • top/left: calc(50% - [innerFixedInPX/2]px);

          height/width: [innerFixedInPX]px;

          (inside an absolute or relatively positioned parent div)

      • <div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

    • 表格作法

      • IE 7 不支援

      • div {
  display: table;  /* 表格 */
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;     /* 表格cell */
  vertical-align: middle;  /* 設為對齊中間 *
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

    • transform 作法

    • .element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

    • absolute 作法

      • 要小心 absolute 的覆蓋問題

      • .absolute-parent {
  position: relative;
}

.absolute-center-element {
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  margin:auto;
}

    • Flexbox

PreviousDebounce & ThrottleNextData Processing

Last updated