您现在的位置是：网站首页> 编程资料编程资料

div中内容上下居中小结不定宽高的文字在div中垂直居中实现方法关于div中img,span垂直居中的问题让Div实现水平或垂直居中的相关方法css中position:fixed实现div在窗口上下左右居中css中position:fixed实现div居中上下左右居中DIV+CSS中让布局、背景图片、文字内容居中的方法IE9下DIV本来应该居中的结果显示为居左DIV+CSS垂直居中一个浮动元素CSS实现DIV居中的三种方法

2023-10-24 296人已围观

简介 这篇文章主要介绍了div中内容上下居中小结,需要的朋友可以参考下

虽然div中内容上下居中的问题已经是一个比较古老的话题，但是最近发现还是有很多前端开发者在询问如何实现。其实网络上已经有很多资料和案例了，我这里再总结一下几个比较常见的处理方式。

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


复制代码
代码如下:



我的内容只能有一行。

valign_1

情形二：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%;
}



我的内容不限，多高都行
换行照常

valign_2

情形三：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;
}



我的高度是固定的，只有100px高，但是我的父及高度不定，我怎么垂直居中呢？







valign_3

情形四：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%);
}


我的高度不定，我的父及高度也不定，这下要上下居中，该如何是好？我们一起来瞧瞧吧。







valign_4

好了，知道这四种方式，我相信足以应对日常工作中的各种垂直居中问题。代码很简单，不再做多余阐述。总之一句话，CSS的各个属性样式，就好像人肢体的各个器官，了解了各个器官的功能，才能相互配合完成各种任务。相反，个体的能力是有限的。

上一篇：css表头固定样式的方法css固定table表头的实现代码可同时看到表头和表格底部CSS教程,CSS固定表头的HTML表格-CSS教程-网页制作-网页教学网css 固定表头 拖动滚动条时对应表头所对应的列 ie6测试通过CSS如何实现表头冻结效果css固定表头、行头样式代码html css将表头固定的最直接的方法

下一篇：CSS3实现闪烁动画效果的方法一款纯CSS3代码实现星系轨道旋转网站菜单特效源码js+css3实现的圆形时钟带星期和日期效果源码CSS3 animation实现逐帧动画效果8款使用 CSS3 实现超炫的 Loading（加载）的动画效果CSS3实现的多个文字动画效果切换特效源码基于HTML5+CSS3实现的古典纸扇动画效果源码 一款纯css3实现的鼠标悬停动画按钮基于CSS3实现六种不同动画效果星级评分特效源码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网