CSS小技巧（慕課）筆記
阿新 • • 發佈：2017-12-03
enter cell 通過 水平居中 title pos 塊級元素 img ref
一、水平居中設置-行內元素
如果需要讓一個行內元素居中，則需要對其父元素設置：text-align。換句話說，如果一個元素（塊級）要使其內容（內容可能是文本也可能是行內子元素），則需要對這個塊級元素設置text-align:center。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>定寬塊狀元素水平居中</title> <style> div{ border:1px solid red; text-align:center; margin:40px; } </style> </head> <body> <!--內容是文本--> <div>我想要在父容器中水平居中顯示。</div> <!--內容是span元素--> <div><span>我是一條魚</span></div> <!--內容是圖片--> <div><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div> </body> </html>
二、水平居中設置--塊級元素
text-align屬性的設置對於塊級元素本身的布局是無效的。而塊級元素需要水平居中的話，其寬度一般是給定的（如果不給定，則占據整行，則看不出居中。）。
對於定寬塊級元素，可以通過設置左右margin:auto來實現居中。
<!DOCTYPE HTML> <html> <head> <style> div{ border:1px solid red; width:50%; margin:20px auto; } </style> </head> <body> <div>我是定寬塊狀元素，我要水平居中顯示。</div> </body> </html>
三、垂直居中-父元素高度確定的單行文本
設置line-height與height值一致。
<!DOCTYPE HTML> <html> <head> <style> h2{ margin:0; height:100px; line-height:100px; background:#ccc; } </style> </head> <body> <div> <h2>hi,imooc!</h2> </div> </body> </html>
四、垂直居中-父元素高度確定的多行文本及圖片
（方法一）利用table中td標簽默認的vertical-align:middle屬性。
<!DOCTYPE HTML> <html> <head> <style> td {height:300px;background:#ccc} </style> </head> <body> <table><tbody><tr><td> <div> <p>看我是否可以居中看我是否可以居中看我是否可以居中看我是否可以居中看我是否可以居中看
我是否可以居中看我是否可以居中看我是否可以居中看我是否可以居中看我是否可以居中看我是否可以居中
看我是否可以居中看我是否可以居中看我是否可以居中看我是否可以居中看我是否可以居中看我是否可以居中
看我是否可以居中看我是否可以居中</p> </div> </td></tr></tbody></table> <!--下面是代碼任務區--> <div> <table><tbody><tr><td> <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/> </td></tr></tbody></table> </div> </body> </html>
（方法二）通過設置塊級元素的display:table-cell。（IE6-7不支持）
該方法可以激活元素的vertical-align屬性,在通過設置vertical-align:middle可以實現垂直居中。
<!DOCTYPE HTML> <html> <head> <style> div.tbcell{ height:300px; background:#ccc; border:1px solid blue; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style> </head> <body> <!--需要為p元素和圖片分別增加一個固有塊級屬性的div--> <!--以避免table-cell屬性的“不分行”--> <div> <div class="tbcell"> <p>看我是否可以居中。看我是否可以居中。看我是否可以居中。看我是否可以居中。看我是否可以居中。看我是否可以居中。看我是否可以居中。看我是否可以居中。看我是否可以居中。看我是否可以居中。看我是否可以居中。看我是否可以居中。看我是否可以居中。</p> </div> </div> <div> <div class="tbcell"> <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/> </div> </div> </body> </html>
五、隱式地改變元素的display屬性
當元素設置以下樣式之一後，其display屬性就會變成inline-block（可以設置寬高值，且默認寬度不占據整個父元素行）：
position:absolute;
float:left;
float:right;
<!DOCTYPE HTML> <html> <head> <title>隱性改變display類型</title> <style> .container a{ position:absolute; width:200px; background:#ccc; } </style> </head> <body> <div class="container"> <a href="#" title="">進入課程請單擊這裏</a> </div> </body> </html>
CSS小技巧（慕課）筆記