布局中关于内容垂直居中的CSS技巧

介绍下布局中关于内容垂直居中的CSS技巧，就是关于图片或者多行文字在固定高度的容器中垂直居中的问题。

首先我们看一下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>内容垂直居中CSS技巧</title> <style media="screen" type="text/css"> *{ margin:0; padding:0;} .text_contant{height:400px; width:280px; background:#f7f7f7;display:table ;*position:relative;} .show_text{display:table-cell;vertical-align:middle;*position:absolute;*top:50%;} .show_text p{*position:relative;*top:-50%; display:block;} </style> </head> <body> <div class="text_contant"> <div class="show_text"> <p>Becoming greener and more environmentally friendly is a long term business strategy. It requires commitment and dedication from all areas of the product supply chain. As part of our responsibility we are proudly sponsoring Expo 2010.</p> </div> </div> </body> </html>

首先我们看一下工作原理（需要用到3个容器）

在IE浏览器中：

1.定义最外层容器text_contant 定位为相对定位（为下一层CSS的绝对定位确定坐标原点）

2.定义次级容器show_text 定位为绝对定位，因为其父级元素为相对定位，所以show_text的坐标原点会从父级元素左上角开始算起，紧接着 top:50%; 这里的意思是说让show_text以及里面的内容距离上面有50%；

3.定义包裹内容的容器p 定位为相对定位（这里定位的坐标原点是相对于父级元素show_text的）然后距离上面是-50%的高度，这个定位很重要，在IE中这个-50%的高度不是相对最外层text_contant 来计算，而是回去寻找show_text的高度

居中的计算方法是：距上高度 = 总体高度50%-自身高度50%

所以在IE浏览器中，按照这个计算，就会显示在容器中间，达到垂直居中的效果

在非IE浏览器中：（FF;SAFARI;OPERA;CHROME）

1.定义text_contant对其表格化（此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。）

2.对次级show_text 定义其表格单元化（此元素会作为一个表格单元格显示（类似 <td> 和 <th>），然后使用表格中的垂直居中办法 vertical-align:middle 来达到垂直居中的目的

在非IE浏览器中只需要用到两个层级，但是IE并不支持元素表格化属性，所以多加一个层，采用距上距离计算来达到目的。

附上dispaly相关属性

浏览器支持

所有主流浏览器都支持 display 属性。

注释：任何版本的 Internet Explorer （包括 IE8）都不支持 “inherit”、”inline-table”、”run-in”、”table”、”table-caption”、”table- cell”、”table-column”、”table-column-group”、”table-row”、以及 “table-row-group” 属性值。

可能的值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。我们的与众不同之处：免费网络营销顾问：我们为您提供免费的网络营销顾问服务，您需要了解关于如何让企业上网，如何商品电子商务化，如何化流量为销量等事宜，那么请欢迎随时联系我们。 seo友好的操作：凡是我们的客户，我们都会做好前期SEO基础工作，如关键词建议，站内连接优化等。免费网络营销培训：如何合理获得流量，怎么获得更多的直接访问流量，怎么做百度竞价，怎么通过EDM获得流量等，我们有丰富的经验开放给您！愿我们一起共同成长! 联系我们：15376082606 临沂网站建设，临沂网站制作，临沂网页设计，临沂搜索引擎优化张啸工作室www.zxroom.net期待着和您合作! 张啸工作室将是您不悔的选择！

上一篇：ICP备案和经营性ICP有何不同

下一篇：除IE浏览器系列的相关BUG（IE7-JS