垂直居中总结

标签：

  1.css3 ：

  对需要水平垂直居中的元素写css:

position  : absolute;
top       : 50%;
left      : 50%;
transform : translate(-50%,-50%);

2.css:

把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。

div#wrapper {

display: table;

width: 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;

width:70%;

background-color: #000;

}

<div id="content">

content here</div>

</body>

5.css
文本居中：

height = line-height

6.css
增加一个隐藏元素span

#content {
width: 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%;
width: 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>

垂直居中总结

标签：

原文地址：http://www.cnblogs.com/czzblog/p/5664006.html