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
結構：
<``div class="Pos-Container is-Table">
<``div class="Table-Cell">
<``div class="Center-Block">
``
</``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
.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``;
}
這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。
點選：加入