垂直水平居中的实现方式
方法一:
将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;}