ul li橫排
ul
li.container
.container
ul.container
listyle>
.container
.container
ul.container
listyle>
1.如果被設定的元素是行內元素（text img），給父元素設定text-align：center即可達到水平居中
2.如果被設定的元素是塊狀元素。用上述方法就不起作用了。這時分兩種情況：定寬塊狀和不定寬塊狀。
如果被設定的元素是定寬塊狀的，那麼設定「左右margin：auto」即可達到水平居中。
如果是不定寬的有三種方法。
第一種：給被設定元素加table標籤
第一步：在被設定元素的外面加上
第二步：為這個table設定「左右margin：auto」。
第二種：設定display：inline方法
改變塊級元素的display為inline，然後使用text-align：center來實現居中效果。
這種方法相比第一種方法的優勢是不用增加無語義標籤，簡化了標籤的巢狀深度，但也存在著一些問題：它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
第三種：設定position：relative和left：50%
通過給父元素設定float，然後給父元素設定position：relative和left：50%，子元素設定position：relative和left：-50%來實現水平居中。
這種方法可以保留塊狀元素仍以 display:block 的形式顯示，優點不新增無語議表標籤，不增加巢狀深度，但它的缺點是設定了 position:relative，帶來了一定的***。
這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
垂直居中
1.父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的height和line-height高度一致來實現的。
2.父元素高度確定的多行文字、、塊狀元素的豎直居中的方法有兩種：
方法一：使用插入table（同上）標籤，同時設定vertical-align：middle。（vertical-align樣式只有在父元素為td或th時才會生效。 td 標籤預設情況下就預設設定了 vertical-align 為 middle）
方法二：在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell，啟用 vertical-align 屬性，但注意 ie6、7 並不支援這個樣式。
隱性改變display型別：
當為元素（不論之前是什麼型別元素，display:none 除外）設定以下 2 個句之一：
position : absolute
float : left 或 float:right
元素會自動變為以 display:inline-block 的方式顯示，當然就可以設定元素的 width 和 height 了且預設寬度不佔滿父元素。
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...