CSS 居中大全

<center>

text-align:center

在父容器裏水平居中 inline 文字，或 inline 元素

vertical-align:middle

垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效。

line-height

與 height 聯手，垂直居中文字

margin:auto

示例：

<style>
  #ex2_container { width:200px; background-color:yellow; }
  #ex2_content { margin:0px auto; background-color:gray; color:white; display:table; }
</style>
<div id="ex2_container"><div id="ex2_content">Hello World</div></div>

hacks, hacks（小技巧）

有許多 hacks ，負 margin，影子元素 ::before 等。若是你的內容不是固定大小的話，它們大部分是很脆弱的。

translate(-50%,-50%)

用 position 加 translate translate(-50%,-50%) 比較奇特，百分比計算不是以父元素爲基準，而是以本身爲基準。

參考文章：居中百分比寬高的元素

示例：

<style>
  #ex3_container { width:200px; height:200px; background-color:yellow; position:relative; }
  #ex3_content { left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:gray; color:white; position:absolute; }
</style>
<div id="ex3_container"><div id="ex3_content">Hello World</div></div>

這個技巧至關囂張，一樣適用於沒固定大小的內容，min-width，max-height，overflow:scroll 等。

絕對定位居中

父容器元素：position: relative

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

注意：高度必須定義，建議加 overflow: auto，防止內容溢出。

視口居中

內容元素：position: fixed，z-index: 999，記住父容器元素 position: relative

.Absolute-Center.is-Fixed {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 999;
}

模態窗口實例

響應式

百分比寬高，最大、最小寬度都可以，加 padding 也能夠

.Absolute-Center.is-Responsive {
  width: 60%;
  height: 60%;
  min-width: 400px;
  max-width: 500px;
  padding: 40px;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

偏移

只要 margin: auto; 在，內容塊將垂直居中，top, left, bottom, right 能夠設置偏移。

.Absolute-Center.is-Right {
  width: 50%;
  height: 50%;
  margin: auto;
  overflow: auto;
  position: absolute;
  top: 0; left: auto; bottom: 0; right: 20px;
  text-align: right;
}

溢出

居中內容比父容器高時，防止溢出，加 overflow: auto （沒有任何 padding 時，也能夠加 max-height: 100%;）。

.Absolute-Center.is-Overflow {
  width: 50%;
  height: 300px;
  max-height: 100%;
  margin: auto;
  overflow: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

調整尺寸

resize 屬性能夠讓尺寸可調。 設置 min- /max- 限制尺寸，肯定加了 overflow: auto 。

.Absolute-Center.is-Resizable {
  min-width: 20%;
  max-width: 80%;
  min-height: 20%;
  max-height: 80%;
  resize: both;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

圖像

圖像一樣適用，設置 height: auto;

.Absolute-Center.is-Image {
  width: 50%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

可變高度

高度必須定義，但能夠是百分比或 max-height。不想定義高度的話，用 display: table （須要考慮 Table-Cell 兼容性）。

.Absolute-Center.is-Variable {
  display: table;
  width: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

負 margin

確切知道寬高，負 margin 是寬和高的一半。

.is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}

Table-Cell

參考文章：Flexible height vertical centering with CSS, beyond IE7

結構：

<div class="Pos-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
    <!-- CONTENT -->
    </div>
  </div>
</div>

樣式：

.Pos-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

FlexBox

參考文章：Designing CSS Layouts With Flexbox Is As Easy As Pie

.Pos-Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

參考資料：
* Absolute Horizontal And Vertical Centering In CSS
* Absolute Centering in CSS
* CENTERING ALL THE DIRECTIONS
* Seven Ways of Centering With CSS
* How to Center Anything With CSS
* Vertical Centering With CSS