水平居中：
內聯元素：text-align:center;相對于父級居中顯示
塊級元素：margin:0 auto;但是需要同時width，否則無法看到效果
多個塊級元素居中：在此想要探討一下display:inline-block;和display:flex;
方法1：在父級上設置text-align:center;在元素上設置:display:inline-block;同時為了使文字向左顯示，
設置了text-align:left;在瀏覽器中的顯示為，子元素高度自適應，底部對齊。
方法2：在子元素上設置display:center;justify-content:center;子元素的高度一致，與元素中內容最多的高度相同。
二種方法在谷歌，火狐，360均兼容，但是第2種方法在IE10中不兼容，之前的IE版本可想也是不兼容的。
當然在此也要處理由于浮動導致離層，父級背景顏色加不上去的問題。
1 <main class="inline-block-center"> 2 <div> 3 I’m an element that is block-like with my siblings and we’re centered in a row. 4 </div> 5 <div> 6 I’m an element that is block-like with my siblings and we’re centered in a row. I have more content in me than my siblings do. 7 </div> 8 <div> 9 I’m an element that is block-like with my siblings and we’re centered in a row. 10 </div> 11 </main>
1 <main class="flex-center"> 2 <div> 3 I’m an element that is block-like with my siblings and we’re centered in a row. 4 </div> 5 <div> 6 I’m an element that is block-like with my siblings and we’re centered in a row. I have more content in me than my siblings do. 7 </div> 8 <div> 9 I’m an element that is block-like with my siblings and we’re centered in a row. 10 </div> 11 </main>
1 body { 2 background: #f06d06; 3 font-size: 80%; 4 } 5 main { 6 background: white; 7 margin: 20px 0; 8 padding: 10px; 9 } 10 main div { 11 background: black; 12 color: white; 13 padding: 15px; 14 max-width: 125px; 15 margin: 5px; 16 } 17 .inline-block-center { 18 text-align: center; 19 } 20 .inline-block-center div { 21 display: inline-block; 22 text-align: left; 23 } 24 .flex-center { 25 display: flex; 26 justify-content: center; 27 }
垂直居中：
方法1：設置padding-top和padding-bottom的值相等
方法2：設置height和line-height的值相等
方法3：固定高度可以有一種處理方式position:absolute;top:50%;height:100px;margin-top:-50px;
如果高度不固定，也可以使用js動態獲取高度來。
還有css3的一些屬性，考慮到兼容性問題不在敘述。
【 微信掃一掃 】
