如何簡單方便地讓元素居中呢？在不同情況下寫法或許還得不一樣，下面我們直入主題，說幾個居中的方法：
方法一：（個人覺得最好用的一種）
.parent.child
注意：瀏覽器支援：chrome、firefox、safari、mobile safari、ie8-10，這種方法在windows phone上不起作用
方法二、負margin值
這或許是最常用的方法。如果知道了各個元素的大小，設定等於寬高一半大小的負margin值（如果沒有使用box-sizing: border-box樣式，還需要加上padding值），再配合top: 50%; left: 50%;樣式就會使塊元素居中。
.child/*這是按照預想情況也能在工作在ie6-7下的唯一方法。*/
方法三、transform法
.child
注意：不支援ie8；需要寫廠商字首；會和其他transform樣式有衝突；某些情況下的邊緣和字型渲染會有問題；
方法四、table-cell法
.center-container.is-table .is-table .table-cell .is-table .center-block
<方法五、inline-block法居中div
class
="center-container is-table"
>
<
div
class
="table-cell"
>
<
div
class
="center-block"
>
div>
div>
div>
基本方法是使用display: inline-block,vertical-align: middle樣式和偽元素讓內容塊在容器中居中。我的實現用到了幾個在其他地方見不到的新技巧解決了一些問題。
內容區宣告的寬度不能大於容器的100% 減去0.25em的寬度。就像一段帶有長文字的區域。不然，內容區域會被推到頂端，這就是使用:after偽類的原因。使用:before偽類則會讓元素有100%的大小！
.center-container.is-inline .center-container.is-inline:after,.is-inline .center-block .center-container.is-inline:after .is-inline .center-block
<
div
class
="center-container is-inline"
>
<
div
class
="center-block"
>
div>
div>
注意：
方法六、flexbox法
css未來發展的方向就是採用flexbox這種設計，解決像垂直居中這種共同的問題。請注意，flexbox有不止一種辦法居中，他也可以用來分欄，並解決奇奇怪怪的布局問題。
.center-container.is-flexbox所用樣式/*不支援ie8-9*/
支援的瀏覽器
是否 響應式
內容溢位後的樣式
resize:both
高度可變
主要缺陷
absolute
現代瀏覽器&ie8+
是會導致容器溢位是是*
『可變高度』的特性不能跨瀏覽器
負margin值所有否
帶滾動條
大小改變後不再居中
否不具有響應式特性，margin值必須經過手工計算
transform
現代瀏覽器&ie9+
是會導致容器溢位是是
妨礙渲染
table-cell
現代瀏覽器&ie8+
是撐開容器否是
會加上多餘的標記
inline-block
現代瀏覽器&ie8+&ie7*
是撐開容器否是
需要使用容器包裹和hack式的樣式
flexbox
現代瀏覽器&ie10+
是會導致容器溢位是是
需要使用容器包裹和廠商字首（vendor prefix）
元素居中的方法
1 在父元素上，新增 text align center 2 在目標元素上，新增 display inline block 倘若目標元素本就是行內塊元素，則不用新增此句 vertical align middle 3 在與目標元素同級的後面新增乙個元素，如。則在css樣式上新增 display in...
html css 元素居中的方法
html元素 水平居中 於 其父級元素的方法 方法1 左右居中方法1 html,body,div wrap left right middle1 方法2 左右居中方法2 html,body,div wrap left right middle2 html元素 垂直居中 於 其父級元素的方法 上下居中...
元素居中方法
一 水平居中方式 行內元素 text alien center 塊元素 已知寬度 1 margin 0 auto 2 position margin組合 left 50 margin left px 未知寬度 1 display inline inline block text alien cent...