标签：container 方法 技巧 tle 块级元素 笔记 class display 实现
一、水平居中设置-行内元素
如果需要让一个行内元素居中，则需要对其父元素设置：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>
标签：container 方法 技巧 tle 块级元素 笔记 class display 实现
原文地址：http://www.cnblogs.com/tsembrace/p/7956002.html
