div内容垂直居中 N中方法

div内容垂直居中 N中方法

NO1：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>

NO2：div限高，内容不限

<style>
.v-mult {
 margin: 0 auto;
 width: 200px;
 height: 100px;
 border: 1px solid #ddd;
 overflow: hidden;
 }
 .v-mult .empty,
 .v-mult .text {
 display: inline-block;
 *display: inline;
 *zoom: 1;
 vertical-align: middle;
 }
 .v-mult .empty {
 height: 100%;
 }
</style>
 <!-- html -->
 <div class="v-mult">
 <span class="empty"></span>
 <span class="text">我的内容不限，多高都行
 换行照常</span>
 </div>

NO3：div高度不定，内容高度一定

<style> .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;
 }
</style>
 <!-- html -->
 <div class="v-auto">
 <div class="text">
我的高度是固定的，只有100px高，但是我的父及高度不定，我怎么垂直居中呢？
</div>

NO4：div高度不定，内容高度不定

<style>.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%);
 }
</style>
 <!-- html -->
 <div class="v-auto-out">
 <div class="auto-in">我的高度不定，我的父及高度也不定，这下要上下居中，该如何是好？我们一起来瞧瞧吧。</div>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/rumen/r50304.shtml