來源：http://www.cnblogs.com/QianBoy/p/8539077.html

水平居中

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; }

?

轉載于:https://www.cnblogs.com/huashanqingzhu/p/8572827.html

總結

以上是生活随笔為你收集整理的CSS 居中布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。