div中内容上下居中小结
虽然div中内容上下居中的问题已经是一个比较古老的话题,但是最近发现还是有很多前端开发者在询问如何实现。其实网络上已经有很多资料和案例了,我这里再总结一下几个比较常见的处理方式。
情形一:div限高,内容长度限一行
复制代码代码如下:
.v-align {
margin: 0 auto;
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
border: 1px solid #ddd;
}
情形二: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高度不定,内容高度一定
复制代码代码如下:
.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高,但是我的父及高度不定,我怎么垂直居中呢?
情形四: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%);
}
好了,知道这四种方式,我相信足以应对日常工作中的各种垂直居中问题。代码很简单,不再做多余阐述。总之一句话,CSS的各个属性样式,就好像人肢体的各个器官,了解了各个器官的功能,才能相互配合完成各种任务。相反,个体的能力是有限的。相关阅读:
解析Swift语言面相对象编程中的继承特性
Linux软件安装之RPM的安装技巧
PHP删除HTMl标签的三种解决方法
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
jquery得到font-size属性值实现代码
Android中CountDownTimer倒计时器用法实例
Javascript 实现图片无缝滚动
Swing常用组件之单选按钮和复选框
用什么命令来更改Linux用户的密码?
对Java的面对对象编程中对象和引用以及内部类的理解
C#下载文件(TransmitFile/WriteFile/流方式)实例介绍
解析C++编程中virtual声明的虚函数以及单个继承
Android权限控制之自定义权限
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)