居中布局
水平居中
1）使用inline-block+text-align
原理：先將子框由塊級元素改變?yōu)樾袃?nèi)塊元素，再通過設(shè)置行內(nèi)塊元素居中以達(dá)到水平居中。
用法：對子框設(shè)置display:inline-block，對父框設(shè)置text-align:center。
| <div class="parent"> <div class="child">DEMO</div></div>.child{ display: inline-block;}.parent{ text-align: center;} |
缺點(diǎn):child里的文字也會水平居中，可以在.child添加text-align:left;還原
2）使用absolute+transform
| <div class="parent"> <div class="child">DEMO</div></div>.child{ position: relative;}.parent{ position: absolute; left: 50%; transform: translateX(-50%);} |
3）使用flex+justify-content
原理：通過CSS3中的布局利器flex中的justify-content屬性來達(dá)到水平居中。
用法：先將父框設(shè)置為display:flex，再設(shè)置justify-content:center。
| <div class="parent"> <div class="child">DEMO</div></div>.parent{ display: flex; justify-content: center;} |
缺點(diǎn):低版本瀏覽器(ie6 ie7 ie8)不支持
4）使用flex+margin
原理：通過CSS3中的布局利器flex將子框轉(zhuǎn)換為flex item，再設(shè)置子框居中以達(dá)到居中。
用法：先將父框設(shè)置為display:flex，再設(shè)置子框margin:0 auto。
| <div class="parent"> <div class="child">DEMO</div></div>.parent{ display: flex;}.child{ margin: 0 auto;} |
垂直居中
1）使用absolute+transform
用法：先將父框設(shè)置為position:relative，再設(shè)置子框position:absolute，top:50%，transform:translateY(-50%)。
| .parent { position:relative;}.child { position:absolute; top:50%; transform:translateY(-50%);} |
2）使用flex+align-items
原理：通過設(shè)置CSS3中的布局利器flex中的屬性align-times，使子框垂直居中。
| .parent { position:flex; align-items:center;} |
水平垂直居中
1）使用absolute+transform
| .parent { position:relative;}.child { position:absolute; left:50%; top:50%; transform:tranplate(-50%,-50%);} |
2）使用flex+justify-content+align-items
| .parent { display:flex; justify-content:center; align-items:center;} |
總結(jié)
以上所述是小編給大家介紹的CSS布局方案小結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
