垂直居中的方法

垂直水平居中的实现方式

方法一：

将div的显示方式设置wei 表格，这样我们就能用表格的vertical-align property属性

1.  <divid="wrapper">

2.  <divid="cell">

3.  <divclass="content">

4.  Content goeshere</div>

5.  </div>

6.  </div>

7.   

8.  #wrapper{display:table;}

9.  #cell{display:table-cell; vertical-align:middle;}

 

方法二：

使用绝对的div，把top设置为top，topmargin设置为负的content高度，需要指定高度。

因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出

1.  <divclass="content">Content goes here</div>

2.   

3.  #content {

4.  position:absolute;

5.  top:50%;

6.  height:240px;

7.  margin-top:-120px;/* negative half of the height */

8.  }

方法三：

在content元素中插入一个div，设置此div height：50%，margin-bottom：-contentheight

Content清除浮动，并显示在中间。

方法四：

   这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。

1.  <divid="content">Content here</div>

2.   

3.  #content {

4.  position:absolute;

5.  top:0;

6.  bottom:0;

7.  left:0;

8.  right:0;

9.  margin:auto;

10. height:240px;

11. width:70%;

12. }

缺点是在ie8中无效

方法五：

这个方法只能将单文本置中，只是简单得吧line-height设置为那个对象的height值就可以使文本居中了。

1.  <divid="content">Content here</div>

2.   

3.  #content{height:100px; line-height:100px;}