1.css3 ：
对需要水平垂直居中的元素写css:
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%,-50%);
2.css:
把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。
div#wrapper {
display: table;
500px;
height: 500px;
}
div#row {
display: table-row;
}
div#cell {
display: table-cell;
vertical-align: middle;
}
<div id=wrapper>
<div id=row>
<div id=cell>
if you want to sell sugar water for the rest of my life or want a chance to change the world
</div>
</div>
</div>
3.css
知道高度的情况下用绝对定位。
4.css
绝对定位+margin#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
70%;
background-color: #000;
}
<div id="content">
content here</div>
</body>
5.css
文本居中：
height = line-height
6.css
增加一个隐藏元素span
#content {
200px;
height:400px;
border:1px solid red;
}
.div01{
border:1px solid red;
min-height: 30px;
vertical-align: middle;
display: inline-block;
}
span{
display: inline-block;
height:100%;
0;
vertical-align: middle;
overflow: hidden;
}
img{
display: inline-block;
}
<div id="content">
<div class="div01"></div>
<!-- <img src="images/code.png"/> -->
<span></span>
</div>