您所在的位置:小祥子 » 编程 » CSS » 正文

div内容上下居中的方法

时间:2015-02-07 编辑:本站 来源:本站原创

CSS文本左右居中代码 text-align: center;

一个显示区域左右居中 margin: 0 auto;

div区域里的文字上下居中 line-height: 80px;(假设高度为80PX,那么文本就在80px中间)

以上是几个最基本的用法,我们再来看看一些其他的用法

一:div限高,内容长度限一行

以下是代码
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

二: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>
 

三: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>
<div class="v-auto">
<div class="text">
我的高度是固定的,只有100px高,但是我的父及高度不定,我怎么垂直居中呢?
</div>
</div>
 

四: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>
<div class="v-auto-out">
<div class="auto-in">我的高度不定,我的父及高度也不定,这下要上下居中,该如何是好?我们一起来瞧瞧吧。</div>
</div>

关键词:居中 div