1.水平居中：行內元素解決方案

適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，inline-flex）

html部分代碼:<div>文字元素</div><nav><a href="">鏈接元素01</a><a href="">鏈接元素02</a><a href="">鏈接元素03</a></nav>css部分代碼:nav, div{text-align: center;} /* 解決方案： 將inline元素包裹在一個display屬性為block的父級元素中（如,div, nav) 設置這個父級元素屬性: text-align:center即可 *//* 現在大家可以看到nav和div中的子元素水平居中了 */

2. 水平居中：塊狀元素解決方案

對于塊狀元素（display:block）來說，我們需要將它的左右外邊距（即，margin-left，margin-right）設置為auto，即可實現塊狀元素的居中，如下：

html部分代碼:<div class="center">水平居中的塊狀元素</div><p class="center">水平居中的塊狀元素</p>css部分代碼: /* 注意：需要居中的塊元素需要有固定的寬度，否則無法實現居中，因為占據100%寬度 */ div,p {width: 200px; /* 這里需要設置元素寬度 */height: 150px;background: #222;color: #FFF; } /* 定義居中關鍵屬性 */ .center{/* 這里可以設置頂端外邊距 */margin: 10px auto; } /* 現在大家可以看到居中效果的塊狀元素了 */

3.水平居中：多個塊狀元素解決方案

如果頁面里有多個塊狀元素需要水平排列居中，可以將元素的display屬性設置為inline-block，并且把父元素的text-align屬性設置為center即可實現。

html部分代碼:<div class="center">水平居中的塊狀元素</div><div class="center">水平居中的塊狀元素</div><!-- 現在大家可以看到以上兩個塊狀元素水平橫向排列并且居中 提示：如果需要將以上兩個元素垂直排列居中的話，使用上一節的margin: 0 auto;即可實現 -->css部分代碼: /* 解決方案： 設置這幾個塊狀的元素display屬性為inline-block，并且設置父元素text-align屬性為center即可 */ .center{display:inline-block; } body{text-align:center; } /* 元素美化 */ div{width: 100px;background: #222;height: 50px;color: #FFF;padding: 10px; }

4.水平居中：多個塊狀元素解決方案 (使用flexbox布局實現)

使用flexbox布局，只需要把待處理的塊狀元素的父元素添加屬性display:flex及justify-content:center即可

html部分代碼:<div>水平居中的塊狀元素</div> <div>水平居中的塊狀元素</div>css部分代碼:解決方案： 設置需要水平居中的塊狀元素的父元素display為flex ，并且justify-content屬性為center即可body{display: flex;justify-content: center; } /* 頁面美化元素 */ div{width: 100px;background: #222;height: 50px;color: #FFF;padding: 10px;margin: 10px; }

5. 垂直居中：單行的行內元素解決方案

當一個行內元素，即inline，inline-*類型的元素需要居中的話，可以將它的height和line-height同時設置為父元素的高度即可實現垂直居中效果。

html部分代碼:<div id="container"><a href="#">hello, gbtags.com</a></div>css部分代碼:解決方案：將inline元素的高度和line-height設備為一致即可 #container{background: #222;height: 200px; } /* 以下代碼中，將a元素的height和line-height設置的和父元素一樣高度即可實現垂直居中 */ a{height: 200px;line-height:200px; color: #FFF; }

6.垂直居中：多行的行內元素解決方案

組合使用display:table-cell和vertical-align:middle屬性來定義需要居中的元素的父容器元素生成效果，如下：

html部分代碼:<div class="container"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis blanditiis optio accusamus quia sapiente at labore consectetur in quasi veritatis possimus quod nihil aliquam vero saepe rem quas. Ratione eligendi!</a> </div>css部分代碼: 解決方案： 使用display:table-cell和vertical-align來控制元素的居中效果 .container{background: #222;width: 300px;height: 300px;/* 以下屬性垂直居中 */display: table-cell;vertical-align:middle; } a{color:#FFF; }

7. 垂直居中：已知高度的塊狀元素解決方案

html代碼：<div class="item"> </div>css代碼：解決方案：將待居中元素設置為絕對定位，并且設置margin-top為居中元素高度一半的負值 div{width: 100px;height: 100px;background: #222 } /* 以下為居中代碼 */ .item{top: 50%;margin-top: -50px;position: absolute;padding:0; } /* 現在可以看到這個元素垂直居中了，如果元素有padding設置，請自己相對計算一下margin-top值 */

8.垂直居中：未知高度的塊狀元素解決方案

對于無法知道高度的元素，使用transform屬性來垂直移動來實現垂直居中：

html代碼：<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus ab aut quisquam eligendi est in deleniti. </div>css代碼： 解決方案： 因為無法指定margin-top的偏移量，所以這里使用transform屬性，垂直移動-50%即可 div{width: 150px;background: #222;color: #FFF; } /* 元素垂直居中代碼 */ .item{top: 50%;position: absolute;transform: translateY(-50%); /* 這里我們使用css3的transform來達到類似效果 */ }

9. 水平垂直居中：已知高度和寬度的元素解決方案

html代碼：<div class="item"> </div> css代碼：解決方案： 將設置元素絕對定位，并且設置margin-left和margin-right為居中元素(高度或寬度/2)的負值即可 div{width: 150px;height: 150px;background: #222;color: #FFF; } .item{position: absolute;top: 50%;left: 50%;margin-top: -75px;margin-left: -75px; } /* 以上代碼即可保證一個已知高度和寬度的元素水平垂直都居中 */

10.水平垂直居中：未知高度和寬度元素解決方案

html代碼：<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis. </div>css代碼：解決方案：將設置元素絕對定位，并且設置transform的translate為Ｘ，Ｙ軸同時移動-50%即可 div{background: #222;color: #FFF; } /* 以下代碼保證元素在水平和垂直方向上絕對居中 */ .item{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); }

11.水平垂直居中：使用flex布局實現

html代碼：<div class="parent"><div class="item"></div> </div>css代碼：解決方案：設置flex布局，并且定義居中元素的父元素justify-content和align-items屬性為center即可 /* 子元素CSS */ .item{background: #222;color: #FFF;width: 100px;height: 100px; } .parent{display: flex;justify-content:center;align-items: center;/* 注意這里需要設置高度來查看垂直居中效果 */background: #AAA;height: 300px; }

注：以上資源整理自極客標簽學習文檔，推薦大家學習使用

附上網址：http://www.gbtags.com

總結

以上是生活随笔為你收集整理的【前端】这可能是你看过最全的css居中解决方案了~的全部內容，希望文章能夠幫你解決所遇到的問題。

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