適用元素:文字,連接,及其其它inline或者inline-*類型元素(inline-block,inline-table,inline-flex)css
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中的子元素水平居中了 */
對於塊狀元素(display:block)來講,咱們須要將它的左右外邊距(即,margin-left,margin-right)設置爲auto,便可實現塊狀元素的居中,以下:html
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; } /* 如今你們能夠看到居中效果的塊狀元素了 */
若是頁面裏有多個塊狀元素須要水平排列居中,能夠將元素的display屬性設置爲inline-block,而且把父元素的text-align屬性設置爲center便可實現。css3
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; }
使用flexbox佈局,只須要把待處理的塊狀元素的父元素添加屬性display:flex及justify-content:center便可api
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; }
當一個行內元素,即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; }
組合使用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; }
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值 */
對於沒法知道高度的元素,使用transform屬性來垂直移動來實現垂直居中:flex
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來達到相似效果 */ }
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; } /* 以上代碼便可保證一個已知高度和寬度的元素水平垂直都居中 */
html代碼: <div class="item"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis. </div> css代碼: 解決方案:將設置元素絕對定位,而且設置transform的translate爲X,Y軸同時移動-50%便可 div{ background: #222; color: #FFF; } /* 如下代碼保證元素在水平和垂直方向上絕對居中 */ .item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
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; }
注:以上資源整理自極客標籤學習文檔,推薦你們學習使用ui
附上網址:http://www.gbtags.com