a.將行內元素包裹在塊級元素中，然後設定：text-align:center
塊級元素的寬度一定，這就是我們平常所用的：margin: 0 auto。
但是當塊級元素的寬度不定的時候，我們可以這樣：讓他display為inline型別，然後給父級標籤設定text-align:center實現。當然了還有另外一種有趣的方法：給父級設定float屬性，position:relative,left:50%;同時給子元素設定position:relative left:-50%.但是相對定位設定left後會在原地『留坑』，酌情使用。
.box
.box1
1
b.用彈性盒子實現flexbox .給元素父級設定：display:flex;justify-content:center 給子元素設定display:inline-flex;
這個時候只要給父元素設定相同的上下padding即可實現。
a.如果是單行文字，設定line-height等於父元素高度即可。
b.如果是多行文字，，塊級等元素的時候，高度又不確定，我們可以利用vertical-align：middle這個屬性實現居中。但是這個vertical-align這個屬性預設為父元素是td或者th等表單類的時候才生效。這個時候我們就要把父元素進行轉化：display：table-cell(ie6、7不支援此屬性)。大家可以試著居中一下。
a.父元素設定相對定位。子元素設定絕對定位。令子元素的top,left值都為50%，利用負的margin-left和負的margin-top值為其寬高的一半實現水平垂直居中。
b.設定父元素相對定位，設定子元素的margin為auto，並令其left.top,bottom.right值都為0.仍然可以實現上述效果。
總結：如果還有更好的方法，本人會繼續補充說明。
元素水平垂直居中
lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行，支援ie8 block1 block1 before center1 不...
元素水平垂直居中
給子元素設定以下內容 給父元素新增屬性 display flex align items center justify content center 先給元素設定絕對定位，再依次新增以下屬性，具體 如下所示。position absolute top 0 left 0 right 0 bottom ...
元素水平垂直居中
只可用於定寬高元素 doctype html html lang en head meta charset utf 8 title 垂直居中 title style type text css body parent container style head body div id parent d...