水平居中：
內(nèi)聯(lián)元素：text-align:center;相對(duì)于父級(jí)居中顯示
塊級(jí)元素：margin:0 auto;但是需要同時(shí)width，否則無(wú)法看到效果
多個(gè)塊級(jí)元素居中：在此想要探討一下display:inline-block;和display:flex;
方法1：在父級(jí)上設(shè)置text-align:center;在元素上設(shè)置:display:inline-block;同時(shí)為了使文字向左顯示，
設(shè)置了text-align:left;在瀏覽器中的顯示為，子元素高度自適應(yīng)，底部對(duì)齊。
方法2：在子元素上設(shè)置display:center;justify-content:center;子元素的高度一致，與元素中內(nèi)容最多的高度相同。
二種方法在谷歌，火狐，360均兼容，但是第2種方法在IE10中不兼容，之前的IE版本可想也是不兼容的。
當(dāng)然在此也要處理由于浮動(dòng)導(dǎo)致離層，父級(jí)背景顏色加不上去的問(wèn)題。
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：設(shè)置padding-top和padding-bottom的值相等
方法2：設(shè)置height和line-height的值相等
方法3：固定高度可以有一種處理方式position:absolute;top:50%;height:100px;margin-top:-50px;
如果高度不固定，也可以使用js動(dòng)態(tài)獲取高度來(lái)。
還有css3的一些屬性，考慮到兼容性問(wèn)題不在敘述。
【 微信掃一掃 】
