text-align:center
用於水平居中inline文字或元素，在父元素中設定text-align:center;
2. vertical-align:middle;
用於垂直居中inline文字或元素，配合display:table; 或是 display:table-cell; 有奇效
3. line-height
讓line-height的值等於height;
4. margin:auto;
在元素中設定margin:auto;和乙個給定的width，該元素在父元素中水平居中。
5. hacks
有許多hacks，負margin，偽元素:before/:after等等，如果內容不固定，它們大部分很脆弱。
6. translate(-50%,-50%)
positon加translate(). translate(-50%,-50%)中的百分比計算不是以父元素為基準，而是元素自身。也適用於內容不固定的元素。例如：min-width,max- height,overflow:scroll等等
7. 使用絕對定位position：absolute；
在父元素中設定position：relative；
.absolute_center
建議加上overflow:hidden;
8. 視口居中
同上，先在父元素中設定position：relative；
.absolute_center.isfixed
9. 響應式
百分比寬高，最大最小寬高也可以，加padding也可以
.absolute_center.isresponsive
10. 偏移
只要margin:auto;在，內容塊將垂直居中，top left right bottom可設定偏移
.absolute_center.isright
11. 溢位
居中容器比父元素高時候，防止溢位加overflow:auto;沒有padding時，也可以加max-width:100%;
12. 調整尺寸
設定resize屬性，讓尺寸可調，設定min-/max-限制尺寸，確定加了overflow:auto;
.absolute_center.isresizable
13. 可變高度
高度必須自定義，但可以是百分比或者max-height,不想定義的話可設定display:table;但要考慮到display:table-cell;的相容性
.absolute_center.isvariable
14. 負margin
知道準確的寬高，margin是負的寬高的一半
15. table-cell
最外層設定display:table;
中間設定display:table-cell; vertical-align:middle;
最內層設定width:50%;margin:0 auto;
css居中方式
水平居中的text align center 和 margin 0 auto 前者是針對父元素進行設定而後者則是對子元素。他們起作用的首要條件是子元素必須沒有被float影響。垂直居中的line height 作用在父元素上，當他的值等於父元素的height值時，內部的文字就會自動的垂直居中 萬能p...
居中方式總結
居中在網頁布局常能看到，經過一周的學習，深感居中方式之多，故總結為以下文字。一 水平居中 1.1定寬塊元素在塊元素之中的水平居中 父元素為塊元素，子元素同為塊元素且寬度確定 包括使用px或 確定寬度 對子元素css樣式中新增即可 1.2內聯元素在塊元素之中的水平居中 對塊元素 父元素 新增css樣式...
常見居中方式 （水平居中 垂直居中）
1.水平居中 1 子元素 margin 0 auto 2 使用絕對定位 父元素 position relative 子元素 position absolute left 50 transform translatex 50 3 父元素 text align center 子元素 display in...