1、使用table和tabel-cell属性
html
<div class="wrapper">
<div class="cell">
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh
</div>
</div>
css
html,body{
height: 100%;
}
.wrapper{
display: table;
height: 100%;
}
.cell{
display: table-cell;
vertical-align: middle;
}
注意:兼容到ie8,并且wrapper需要给一个高度。优点:cell中的内容不用固定。
2、方法2
html
<div class="wrapper2">
<div class="content">
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh
</div>
</div>
css
.wrapper2{
position: relative;
height: 100%;
}
.wrapper2 .content{
position: absolute;
top: 50%;
left: 0;
height: 200px;
overflow: auto;
margin-top: -100px;
}
3、方法三
html
<div class="wrapper3">
<div class="floater"></div>
<div class="content">
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh
</div>
</div>
css
.wrapper3{
height: 100%;
}
.wrapper3 .floater{
float: left;
height: 50%;
margin-bottom: -120px;
border: 1px solid #00ff00;
}
.wrapper3 .content{
clear: both;
height: 240px;
position: relative;
}
4、方法四
html
<div class="wrapper4">
<div class="content">
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh
</div>
</div>
css
.wrapper4{
position: relative;
height: 100%;
}
.wrapper4 .content{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 240px;
}
5、单行文本垂直居中
html
<div class="wrapper5">
hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh
</div>
css
.wrapper5{
line-height: 100px;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。