HTML 如何让div内字体上下左右居中

div中的文字水平居中：text-align:center；即可。
div中的文字垂直居中：line-height:值。值等于div的高度。

text-indent:2em;//首航缩进2字符

你们假设你的DIV是高度100PX，宽度是1000PX，那你这样写，你的文字就会水平垂直居中：
<div style="width:1000px; height:100px; text-align:center; line-height:100px; border:blue solid 1px;">
水平垂直居中
</div>
CSS是这样的，text-align:center意思就是说，让这个DIV里的文字水平居中，而line-height:100px;的意思是说，让DIV里面的每一行文字，占的高度为100PX（和那个DIV的高度一样），这样，文字就垂直居中了。也就是说，如果你的DIV是200PX高，那你就让line-height:200px;文字就会垂直居中了。

这里再总结一下几个比较常见的处理方式。

情形一：div限高，内容长度限一

<style>
   .v-align {
   margin: 0 auto;
   width: 200px;
   height: 80px;
   text-align: center;
   line-height: 80px;
   border: 1px solid #ddd;
}
</style>

<div class="v-align">我的内容只能有一行。</div>

情形二：div限高，内容不限

.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%;
}

<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;
}

<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%);
}

<div class="v-auto-out">
<div class="auto-in">我的高度不定，我的父及高度也不定，这下要上下居中，该如何是好？我们一起来瞧瞧吧。</div>

</div>

另外div套div上下左右居中方法：http:///wenji/

秒客网

HTML 如何让div内字体上下左右居中

这里再总结一下几个比较常见的处理方式。

相关文章