DivCSS布局居中

1、Div+CSS布局居中CSS 2009-04-03 16:26:24 阅读103 评论0   字号：大中小 订阅 用CSS让元素居中显示并不是件很简单的事情同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。一、使用自动外边距实现居中CSS中首选的让元素水平居中的方法就是使用margin属性将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度：Example

2、 Source Codediv#container margin-left: auto;margin-right: auto;width: 168px;在大多数主流浏览器中，这种方法都非常有效，即使是Windows平台上的IE6，在其标准兼容模式（compliance mode）下也能够正常显示。但不幸的是，在更低版本的IE中，这种设置却并不能实现居中效果。所以若想在实际项目中使用这种方法，那么就要确保用户的IE浏览器版本不低于6.0。尽管在支持上不尽如人意，但大多数设计师都建议尽可能地使用这种方法。该方法也被认为是在各种用CSS实现元素水平居

3、中方法中最正确、最合理的一种。二、使用text-align实现居中另一种实现元素居中的方法是使用text-align属性，将该属性值设置为center并应用到body元素上即可。这种做法是彻头彻尾的hack，但它却能兼容大多数浏览器，所以在某些情况下也自然必不可少。之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。在创建好布局必须的div之后，我们要按照如下代码为body应用text-align属性：Example Source Codebodytext-align:center;之后会出现什么问题吗？body的所有子孙

4、元素都会被居中显示。因此，我们就需要用再写一条规则，让其中的文本回到默认的居左对齐：Example Source Codep text-align:left;可以想象这条附加的规则将带来一些不便。另外，真正完全遵循标准的浏览器并不会改变容器的位置，而只会让其中的文字居中显示。三、组合使用自动外边距和文本对齐因为文本对齐居中方式有着良好的向下兼容性，且自动外边距方式也被大多数当代浏览器支持，所以很多设计师将二者组合起来使用，以期让居中效果得到最大限度的跨浏览器支持：Example Source Codebody text-align: center;Example

5、Source Code#container margin-left: auto;margin-right: auto;border: 1px solid red;width: 168px;text-align: left可是这始终是个hack，无论如何也算不上完美。我们还是需要为居中容器中的文本编写附加的规则，但至少在各个浏览器中看起来都不错。四、负外边距解决方案负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。下面是该方案的具体实现方法。首先，创建一个包含居中元

6、素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。Example Source Code#container background: #ffc url(52css.jpg) repeat-y center;position: absolute;left: 50%;width: 760px;margin-left: -380px;看，没有任何hack！虽

7、然这并不是首选的解决方案，但也是个不错的方法，且适用性极广甚至在Netscape Navigator 4.x中都没有任何问题，很令人吃惊，不是吗？所以若想得到最广泛的浏览器支持，那么这种方法将会是最好的选择。 垂直居中方法大集合时间:2009-02-12 20:56来源:网络 作者:秩名 点击: 15次1. 单行文字在固定高度容器中垂直居中 这个最简单，只要让行间距 line-height 与容器高度 height 相等即可；    1. #box height: 120px; line-height: 120px; overflow: hidden &

8、#160; 2. 多行文字在未知高度容器中垂直居中 这个也很简单，将 padding-top 与 padding-bottom 设置成相同的值即可；    1. #box2 padding: 10px 0   3. 多行文字在固定高度容器中垂直居中（非 IE 浏览器）    1. #box3_wrapper      2.    display: table;     3.    height: 311px;  &#

9、160;  4.    background: #eee     5.      6. #box3      7.    display: table-cell;     8.    vertical-align: middle     9.   Html代码 复制代码    1. <div id="b

10、ox3_wrapper">     2.    <div id="box3">     3.         作者：shimano<br />     4.         如何既给用户提供最大限度的编辑权限<br />   &

11、#160; 5.         又能保证网页整体的规范和美观？<br />     6.         真 TMD 难啊！     7.    <div>     8. </div>  注意：这其中有个关于字号的问题，在 XP 和 Vista 及 Mac 下即使设定了像

12、素为单位的字号，文字大小也依旧不同，这个在我之前一个篇日志里也提到过，在 XP 下，12px 宋体是 11x11(px)的，在 Vista 下有些文字高 11px 有些高 12px，这也是为什么 Vista 下的宋体看起来比较奇怪，Mac 下默认就是平滑边缘的黑体，再有就是 safari 下平滑边缘的宋体，所以更不容易辨别。 如果细究，在不设定高度和行间距的容器中，12px 宋体文字上下边沿依旧会有 1px 到 2px 的间距，XP 的 IE6 下，字下沿有 3px ，字上沿为 0；Firefox 下，字上沿为 1px，下沿为2px；Vista 下，文字上下各 1px 间距（考虑同等高度文字）

13、；这可以理解为默认 line-height，在 这篇日志 中我也是遇到了同样的问题。 关于 IE6 下 line-height 的问题我在 这篇日志 中有提。 4. 多行文字在固定高度容器中垂直居中（IE 浏览器） 因为 IE 不支持将 div 显示为 table 及其同胞，所以我们要另想办法： Css代码    1. #box3_wrapper      2.    position: relative;     3.      4. #box3_inn

14、er      5.    position: absolute;     6.    top: 50%     7.      8. #box3      9.    position: relative;    10.    top: -50%;    11.  &

15、#160; background: #eee    12.   Html代码    1. <div id="box3_wrapper">     2.    <div id="box3_inner">     3.       <div id="box3">     4.&

16、#160;         这种方法<br />     5.          在下面的未知高度 div 垂直居中<br />     6.          也用到了     7.   

17、60;   </div>     8.    </div>     9. </div>  下面有个权衡 IE 与 非 IE 浏览器浏览效果的实现方法，请继续看 5. 未知高度 div 的垂直居中 Css代码 复制代码    1. #box4_wrapper      2.    height: 100%;     3. &

18、#160;  width: 100%;     4.    overflow: hidden;     5.    position: relative     6.      7. #box4_wrapperid      8.    display: table;     9.   

19、position: static    10.     11. #box4_outer     12.    position: absolute;    13.    top: 50%    14.     15. #box4_outerid     16.    display: table-cell;    17.  &#

20、160; vertical-align: middle;    18.    position: static    19.     20. #box4_inner     21.    position: relative;  22.    top: -50%;    23.    margin: 0 auto;    24. 

21、0;  background: #eee    25.   Html代码    1. <div id="box4_wrapper">     2.    <div id="box4_outer">     3.       <div id="box4_inner">   &

22、#160; 4.          这是一种无 hack 的方式<br />     5.          虽然环保，但是臃肿:(     6.       </div>     7.    </div>

23、;     8. </div>  CSS2 选择符 #valueid 相当于 #value，但是 IE 不支持这种类型的选择符，使用这种方式区分浏览器避免 hack:) 6. 未知尺寸图片（小与容器高度）在固定高度容器中垂直居中    1. #box5      2.    display: table-cell;     3.    *display: block;     4.    *font-size: 175px;     5.    *font-family: Arial;     6.