div中内容上下居中情形⼀：div限⾼，内容长度限⼀⾏
<style>
.v-align {
margin:0 auto;
width:200px;
height:80px;
text-align: center;
line-height:80px;
border:1px solid #ddd;
}
</style>
<!-- html -->
<div class="v-align">我的内容只能有⼀⾏。</div>
情形⼆：div限⾼，内容不限
.v-mult {
margin:0 auto;
width:200px;
height:100px;
border:1px solid #ddd;
overflow: hidden;
html span 居中}
.v-mult .empty,
.
v-mult .text {
display: inline-block;
*display: inline;
*zoom:1;
vertical-align: middle;
}
.v-mult .empty {
height:100%;
}
<!-- html -->
<div class="v-mult">
<span class="empty"></span>
<span class="text">我的内容不限，多⾼都⾏
换⾏照常</span>
</div>
情形三：div⾼度不定，内容⾼度⼀定
.v-auto {
position: relative;
margin:0 auto;
width:200px;
border:1px solid #ddd;
}
.
v-auto .text {
position: absolute;
top:50%;
margin-top:-50px;
height:100px;
border:1px dashed #ddd;
}
<!-- html -->
<div class="v-auto">
<div class="text">
我的⾼度是固定的，只有100px⾼，但是我的⽗及⾼度不定，我怎么垂直居中呢？
</div>
</div>
情形四：div⾼度不定，内容⾼度不定
.v-auto-out {
position: relative;
margin:0 auto;
width:200px;
border:1px solid #ddd;
}
.v-auto-out .auto-in{
position: absolute;
top:50%;
border:1px dashed #ddd;
/* 这⾥有兼容性问题 */
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}
<!-- html -->
<div class="v-auto-out">
<div class="auto-in">我的⾼度不定，我的⽗及⾼度也不定，这下要上下居中，该如何是好？我们⼀起来瞧瞧吧。</div> </div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。