在實際應用中很多地方不僅要求實現元素的水平居中或者垂直居中效果，還可能會在水平方向和垂直方向上都要實現居中效果，下面就簡單介紹幾種元素水平垂直居中的方法（注：不同的方法會存在一些優缺點以及相容性問題）
hmtl結構：
.parent.child
原理：元素設定定位並給定 50% 的top值和left值，再通過 負margin 將元素向左上移動自身寬高的一半（margin-top:-height/2; margin-left:-width/2），該方法前提是要知道元素的寬高
.parent.child
原理：和上面方法類似，不同的是使用css3新增屬性transform中的 translate 平
移屬性代替 margin屬性，這樣就是根據自身尺寸進行移動，缺點是由於為新增屬性，相容性自然就不是很好，遠古ie不支援。
.parent.child
原理：該方法的關鍵點是：1.絕對定位的（top、right、bottom、left）四個屬性均要設定值為0；2.margin:auto，能夠適用單個元素或者父子級元素，設定絕對定位並新增 margin:auto 屬性就能夠實現水平垂直居中，元素可自定義寬高，也可不設定（需要是自身存在尺寸的元素：img等），具體 絕對定位+margin:auto 的實現原理參考
div.parentdiv.child
//或者
div.parentdiv.child
.child
原理：和flex布局實現思路類似。
.parent.child
DIV水平居中 垂直居中
一 css 居中 水平居中 div等標籤本身沒有定義自己居中的屬性，網上很多的方法都是介紹用上級的text align center，然後巢狀一層div來解決問題。可是這個方法有時候完全不起作用，而且對於布局是非常不科學的方法。正確的的設定寫法如下 對頁面構造沒有影響 div 這句css居中的意思就...
css實現div水平 垂直居中
示例1 chrome33 ie8測試通過 示例2 chrome33 ie8測試通過 示例4 chrome33測試通過，ie8測試不通過，參考 注 對頁面中所有元素應用box sizing border box樣式是為了將padding margin值都計入width height中，即為元素指定的任...
div水平居中及div水平垂直居中的方法總結
1 margin auto wrap wrap txt2 text align center 3 absolute margin偏移 wrap wrap txt4 display box 文字 box pack5 absolute transform 1 line height 文字 wrap tx...