居中布局
水平居中
1）使用inline-block+text-align
原理：先將子框由塊級元素改變為行內塊元素，再通過設置行內塊元素居中以達到水平居中。
用法：對子框設置display:inline-block，對父框設置text-align:center。
<div class="parent"> <div class="child">DEMO</div></div>.child{ display: inline-block;}.parent{ text-align: center;}缺點: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屬性來達到水平居中。
用法：先將父框設置為display:flex，再設置justify-content:center。
<div class="parent"> <div class="child">DEMO</div></div>.parent{ display: flex; justify-content: center;}缺點:低版本瀏覽器(ie6 ie7 ie8)不支持
4）使用flex+margin
原理：通過CSS3中的布局利器flex將子框轉換為flex item，再設置子框居中以達到居中。
用法：先將父框設置為display:flex，再設置子框margin:0 auto。
<div class="parent"> <div class="child">DEMO</div></div>.parent{ display: flex;}.child{ margin: 0 auto;}垂直居中
1）使用absolute+transform
用法：先將父框設置為position:relative，再設置子框position:absolute，top:50%，transform:translateY(-50%)。
.parent { position:relative;}.child { position:absolute; top:50%; transform:translateY(-50%);}2）使用flex+align-items
原理：通過設置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;}總結
以上所述是小編給大家介紹的CSS布局方案小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
