首頁 > 開發者 > JavaScript
CSS布局——置中，css布局
參考文章1.CSS布局奇淫技巧之--各種置中 2.http://www.imooc.com/article/2235
1.行內元素水平置中text-align:center
對圖片，按鈕，文字等行內元素(display為inline或inline-block等)進行水平置中，可對元素或者父元素使用text-align:center
2.定寬區塊層級元素水平置中margin: 0 auto;
.container{ width:500px; /* 元素設定定寬*/ height: 200px; margin:0 auto;/*margin-left和margin-right設定為auto*/ background-color: aquamarine; }
3.使用表格垂直水平置中
如果你使用的是表格的話，那完全不用為各種置中問題而煩惱了，只要用到 td(也可能會用到 th)元素的 align="center" 以及 valign="middle" 這兩個屬性就可以完美的處理它裡面內容的水平和垂直置中問題了,而且表格預設的就會對它裡面的內容進行垂直置中。如果想在css中控製表格內容的置中，垂直置中可以使用 vertical-align:middle，至於水平置中，貌似css中是沒有相對應的屬性的,但是在IE6、7中我們可以使用text-align:center來對錶格裡的元素進行水平置中，IE8+以及Google、Firefox等瀏覽器的text-align:center只對行內元素起作用，對塊狀元素無效，需要設定display。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格置中</title> <style type="text/css" > body{ padding:0; margin:0; } .parent{ vertical-align: middle; text-align: center; width: 200px; height:200px; margin:0 auto; background-color: pink; } .child{ display: inline-block; width: 100px; height: 100px; background-color: deeppink; } </style></head><body><table > <tr> <td class="parent"> <div class="child"></div> </td> </tr></table></body></html>
4.使用display:table;margin:0 auto;水平置中
.child{ display: table; width: 100px; height: 100px; margin:0 auto; background-color: deeppink; }
5.使用display:table-cell垂直水平置中
對於那些不是表格的元素，我們可以通過display:table-cell 來把它類比成一個表格儲存格，這樣就可以利用表格的置中特性。但是，這種方法只能在IE8+、Google、Firefox等瀏覽器上使用，IE6、IE7都無效。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div置中</title> <style type="text/css" > body{ padding:0; margin:0; } .parent{ display:table-cell; vertical-align: middle; text-align: center; width: 200px; height:200px; margin:0 auto; background-color: pink; } .child{ display: inline-block; width: 100px; height: 100px; background-color: deeppink; } </style></head><body><div class="parent"> <div class="child"></div></div></body></html>
效果為
6.單行或多行文本的垂直置中
父元素高度確定的情況下，
單行文本設定父元素的height和line-height一致即可；
多行文本在使用vertical-align:middle的時候，由於對齊的基準是用行高的基準作為標記，故需要設定line-height或設定display:table-cell;
7.絕對位置垂直水平置中
此法只適用於那些我們已經知道它們的寬度或高度的元素。
絕對位置進行置中的原理是通過把這個絕對位置元素的left或top的屬性設為50%,這個時候元素並不是置中的，而是比置中的位置向右或向左偏了這個元素寬度或高度的一半的距離，所以需要使用一個負的margin-left或margin-top的值來把它拉回到置中的位置，這個負的margin值就取元素寬度或高度的一半。
垂直水平置中
.parent{ position:relative;/*父元素相對定位*/ width: 500px; height:300px; background-color: pink; } .child{ position: absolute; left:50%; top:50%; width: 300px; height: 200px; margin: -100px 0 0 -150px;/*margin-left為child寬度的一半，margin-top為child高度的一半*/ background-color: deeppink; }
8.另一種絕對位置置中
此法同樣只適用於那些我們已經知道它們的寬度或高度的元素，並且遺憾的是它只支援IE9+,Google，Firefox等符合w3c標準的現代瀏覽器。
.parent{ position:relative;/*父元素相對定位*/ width: 500px; height:300px; background-color: pink; } .child{ position: absolute; width: 300px;/*寬高需要固定*/ height: 200px; left:0; right:0;/*left和right必須配對出現來控制水平方向，top、bottom同理*/ top:0; bottom:0; margin:auto;/*這句也是需要的，0 auto水平置中，auto 0 垂直置中*/ background-color: deeppink; }
9.flex布局垂直水平置中
flex布局文法和執行個體參考阮一峰的博文：Flex 布局教程：文法篇、Flex 布局教程：執行個體篇
.parent{ display:flex; justify-content:center; align-items:center; width: 500px; height:300px; background-color: pink; }.child{ width: 300px; height: 200px; background-color: deeppink; }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
