CSS水平垂直居中方法

水平居中

text-align:center 和 margin:0 auto 

这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响。




垂直居中

line-height 

他也是作用在父元素上，当他的值等于父元素的height值时，内部的文字就会自动的垂直居中了。但只能是文字。

 

position方法

 

首先给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位不见




接下去，写上子元素的height和width，这个似乎是必须的，某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。

接着就是整个方法的核心，给子元素再打上top:50%; left:50% 以及 margin-top:一半的height值的的负数;margin-left:一半的weight值的负数。当然，父元素也要先写上width和height。

如果你只写top margin-top 就只是实现垂直居中。

下面来试一试吧！

页面元素：

<div class="wrap">heyue fighting！！！！</div>

页面样式;

<style type="text/css">.wrap{width: 600px;height: 400px;      //说明宽和高position: absolute;   //绝对定位margin-top: -200px;margin-left: -300px;top: 50%;left: 50%;          //垂直 水平居中background-color: #ccc;color: red;font-size: 24px;text-align: center;line-height: 400px;     //文字水平 垂直居中}</style>

使用这个方法的好处在于无论你是什么形式的内容都可以马上居中，而缺点就是必须对元素有确定的宽高值，否则的话可能就需要通过javascript来进行一些小计算了。