http://www.divcss5.com/rumen/r50304.shtml

虽然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限高，内容不限

<style>
.v-mult {
margin: 0 auto;
width: 200px;
height: 100px;
border: 1px solid #ddd;
overflow: hidden;
}
.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>
<!-- html -->
<div class="v-auto">
<div class="text">
我的高度是固定的，只有100px高，但是我的父及高度不定，我怎么垂直居中呢？
</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>
<!-- html -->
<div class="v-auto-out">
<div class="auto-in">我的高度不定，我的父及高度也不定，这下要上下居中，该如何是好？我们一起来瞧瞧吧。</div></div>

转：div中内容上下居中小结相关推荐

div居中以及div中的元素居中
div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果. 1. div水平居中:设置margin的左右 ...
如何让Div中的Table居中
如何让DIV中的Table居中呢? 首先在Div中加上 <div style="text-align:center"></div>里面的Table是不会居中 ...
div中内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
div中内容文字垂直居中、文字不换行显示省略号
目录 div中文字垂直居中 2.文字不换行,文本溢出显示省略标志 div中文字垂直居中 1.行高法文字的行高和容器的高度相同, p { height:30px; line-height:30px; ...
div中内容靠右_python读取excel的公司名称信息，并爬虫获取公司的经营范围信息，回填到excel中...
大家总说,python今天学明天忘,没有实际操作,想要知道哪里有练手的机会.其实你要善于发现问题,捕捉问题.不管是你看到文章中的一些案例,还是微信群友问的一个问题.你都需要仔细思考,如果是你做你应该怎 ...
HTML页面，图片img在容器DIV中，上下左右居中（实用技能，css的table-cell）
场景:让不规整的缩略图在容器中居中显示(针对特别长或特别宽的图) 如下图场景: 代码及样式: <html> <head><title>百搭屋</title&g ...
JS 动态清除Div中内容
//把div里面的内容清空 document.getElementById('test').innerHTML="" <div id ="test"> ...
（css）div中内容垂直居中
目录一.常用单行文字居中(line-height/padding) 二.模拟表格方式 *** 三.css3 transform 四.flex布局一.常用单行文字居中(line-height/pad ...
div内容居中(div块内容居中)
如何让div内容居中? 让div文字居中如果要让DIV中的文字居中,就得用到文字对齐方式代码text-align:center,这个居中默认为水平居中,详细代码写法如下:div { border:1p ...
ajax点击更改div,jquery ajax双击div可直接修改div中的内容
jquery ajax双击div可直接修改div中的内容发布于 2017-04-03 17:26:16 | 127 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框 ...

转：div中内容上下居中小结

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

转：div中内容上下居中小结相关推荐

最新文章

热门文章