五花八門實現元素居中

這篇文章很早就想寫了，一直拖到現在，終於動手了，哈哈；

行內元素：在其父元素上設定 text-align:center;

單個塊級元素: 設定width以及margin:0 auto；

多個塊級元素實現水平居中：

(1)為這些塊級元素設定display:inline-block屬性，其父元素設定：text-align:center ;

(2)利用flexbox布局:在這些塊級元素的父元素上設定display:flex;justify-content:center;

注意：一般的瀏覽器設定：display:-webkit-flex;display：flex;對於ie瀏覽器需設定display：-ms-flexboxcss樣式;

單行的行內元素設定子元素的line-height等於父元素的height;

多行的行內元素:

(1) 針對非ie瀏覽器組合使用table-cell和vertical-align：middle ;

(2)針對ie瀏覽器利用font-size;

已知div的高度和寬度：在子元素上設定position：absolute；top:50%;left:50%;再利用margin-top:-height/2;和margin-left:-width/2;再稍微調整；

利用table實現垂直居中 table元素作為父級元素新增 align=」middle」;單行的行內元素 :

（1）元素：設定vertical-align:middle;

（2）文字：在父元素上設定text-align:center;自身設定line-height:為父元素的高度;

（3）與文字都有：父元素設定display:table-cell; vertical-align:center; text-algin:center;

（4）對**元素td使用vertical-align:middle可對其內的元素進行垂直居中，對父元素使用display:table-cell;vertical-align:middle;也可實現對元素的垂直居中，且該種方法無論行內元素還是塊元素均可使用；

塊級元素:

(1)單個塊級元素（絕對定位+margin)：父元素設定position：relative;自身設定position:absolute;top:50%;left:50%;margin-top:-（為自身的高度的一般;margin-left:-(為自身寬度的一半);

3.利用css3實現垂直水平居中:

(1)flex布局實現水平居中:（適用於塊級元素與行內元素的單個元素或多個）實現水平居中：在父元素上設定 display:flex;justify-content:center;

(2)利用transform實現垂直水平居中:在父元素上設定position: relative;在子元素上設定transform:translate(-50%,-50%)；position:absolute;top:50%;left:50%；