CSS制造水平垂直居中对齐

CSS制作水平垂直居中对齐

作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要正确的选择也是一件不容易的事情。我会将这几种方法一一介绍给大家，以供大家参考。或许对于我这样的初学者有一定的帮助。

用CSS来实现元素的垂直居中效果是件苦差事，虽然说实现方法有多种，但有很多方式在某些浏览器下可能无法正常的工作。接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处。

这种方法用来实现单行垂直居中是相当的简单的，你只要保证元素内容是单行，并且其高度是固定不变的，你只要将其“line-height”设置成和“height”值一样就Ok了。不过这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的。

Html Markup

<div + mt + "px","top": "50%","margin-left": "-" + ml + "px","left": "50%","width":w,"height":h,"position": "absolute"}); });};})(jQuery);

Html Markup

<div src="vhAlign.js"></script>

最后需要在div.wrap调用这个function

<script type="text/javascript">$(document).ready(function(){$(".wrap").vhAlign();});</script>

这里有一点需要特别注意，如果元素不是相对于body居中，那么需要在其父元素中进行相对定位。

上面我们一起见证了八种不同方法实现元素的垂直居中效果，下面我们在简单的看一下如何实现元素的水平居中（其实上面有一些效果也实现了水平居中，你可以慢慢回想一下）。

这种方法主要使用margin: auto配合元素的width来实现水平居中的效果

Html Markup

<div class="horizontal">content</div>

CSS Code:

.horizontal {width: 200px;margin: 0 auto;}

使用上面方法实现元素水平居中一定要让元素满足两个条件：其一，元素需要有一个固定宽度值；其二元素的margin-left和margin-right都必须设置为auto，这两个条件少了任何一个都无法让元素达到水平居中的效果。此方法使用水平居中，支持所有浏览器运行，因此他也常用来实现Web页面水平居中的布局效果，如果用在布局，需要注意IE下的效果，换句话说，如果你的Web页面没有明确声明"!DOCTYPE"，那么在IE也会以怪异模式解析你的Web页面，此时上面这种办法将无法让你的页面实现水平居中，但你可以使用下面这种方法解决这个bug。

Html Code:

<div class="container">页面内容。... </div>

CSS Code:

body {text-align: center;/*实现IE在怪异模式下页面水平居中*/}.container {text-align: left;/*让文本恢复到左对齐*/width: 960px;/*设置页面总宽度*/margin: 0 auto;/*使页面水平居中对齐*/}

实现固定宽度的水平居中，我们还可以使用绝对定位配合负的margin来实现，具体代码如下：

Html Markup

<div class="horizontal">content</div>

CSS Code:

.horizontal {width: 960px;position: absolute;left: 50%;margin-left: -480px;/*此值等于“-width/2”*/}

这种方法有几点需要注意：其一要有一个固定宽度，其二对要居中的元素进行绝对定位，并且“left: 50%”；其三对此元素设置一个负的“margin-left”并且值等于宽度的一半，另外如果元素不是相对于浏览器的话，还需要在其父元素上设置一个相对定位“position: relative”。

这种方法主要是针对单行文本居中或者前面介绍的table格式居，主要运用的是text-align:center让元素水平居中

.testH{text-align:center;}

上面主要是和大家一起探讨和学习了多种方法让元素实现垂直居中，大家可以在这几种方法上稍做改变就能实现其水平居中，这样就达到了元素水平垂直居中的效果。实现方法很多，而且他们也各有千秋，可以说他们各有各的好，各有各的坏，具体怎么让他们更适合你的实际应用，你可以仔细对比一下，我比较喜欢方法四，简单，兼容性强，只是需要增加一个额外的标签。说了这么多，希望能给需要的朋友有所帮助。