未知高宽的div在其父级div中垂直居中显示
(一)如果已知子div的高宽
.father {
position: relative;
}
.child {
width: 100px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px; // margin-left为宽度的一半
margin-top: -40px; // margin-top为高度的一半
}
(二)、未知子div的高宽
.father {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); // 原理:让子divX轴方向往左偏移一半自身宽度的距离,Y轴方向往上偏移自身一半高度的距离
}
未知高宽的div在其父级div中垂直居中显示的更多相关文章
- 让一个父级div根据子级div高度而自适应高度
需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...
- line-height让文本在块级元素中居中显示总结
一.总结: line-height不仅可以用在段落文本中控制行与行之间的间距,还可以用来控制文本在li这种块级元素中的位置. 文本行间距的大小由字体的大小决定,行间距的大小的设置方法有5种方式:
- span(行级元素)在不定高的div(块级元素)中垂直居中的方法
设置父级元素: align-items: center; display: flex;
- 利用css来让一个div在页面中垂直居中的方法
一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...
- css 实现 左右div 等高, 同时父级div就是最高的子div的高度
原文地址:https://www.cnblogs.com/cbza/p/7145384.html 方法一: 通过父级overflow:hidden, 自己设置padding-bottom 和 mar ...
- 高宽不定的div相对父div上下、左右居中
<div class="parent"> <div class="child">123</div> </div> ...
- css实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
- 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。
实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...
- JS获取IMG图片高宽
前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了 ...
随机推荐
- python正则re
import reline = "Catsaresmarterthandogs"matchObj = re.match( r'(.*)are(\w{2})(.*)', line, ...
- hive调用MapReduce之后遇到kill command之后卡住或者一直开在MapReduce之前
https://blog.csdn.net/weixin_42158422/article/details/88876943
- Dubbo入门到精通学习笔记(一):Dubbo对传统工程进行改造、注册中心安装(Zookeeper-3.4.6)、工程结构优化
文章目录 改造思路 样例工程:传统的单工程项目(edu-demo) 模型结构 思路 改成dubbo调用方式后的工程结构 部署环境规划 改造 愚公移山 迁移包 迁移页面: 迁移配置相关 新项目的主要作用 ...
- ISA虚拟化的条件
ISA(Instruction Set Architecture) 指令集体系结构,是硬件与软件层之间的接口. 本地系统虚拟机 本地系统虚拟机,就是Bare-Metal虚拟机,直接运行在硬件上,在它上 ...
- 拾遗:关于“尾递归”- tail recursion
定义[个人理解]: 尾递归,即是将外层得出的常量计算因子,以函数参数的形式逐层向内传递,即内层调用整合外层调用的产出,整个递归的结果最终由最内层的一次函数调用得出:而通常的递归则是外层调用阻塞.等待内 ...
- Git 学习第一天
本文是根据廖雪峰老师的git教程记录的学习笔记,特此说明,原教程链接https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c ...
- centOs7 java启动jar 并部署到nginx
简单启动命令 启动命令: nohup java –jar 项目名 & 注意1.加&表示一直后台运行,不加表示临时运行,关闭窗口项目即停止运行2.nohup:即项目在运行前新建一个noh ...
- hbase启动的时候报:cat: /home/hadoop/hbase-0.94.6-cdh4.5.0/target/cached_classpath.txt: 没有那个文件或目录
启动hbase的时候: -cdh4.5.0/bin$ hbase shell cat: /home/hadoop/hbase--cdh4.5.0/target/cached_classpath.txt ...
- 关于Web中的图标使用问题
挺懒的,这里做个记录. Web中的图标使用问题 : https://github.com/amfe/article/issues/2
- 使用jQuery的datetimepicker插件
因为后台系统要使用年月日时分的设置,又因为使用的Bootstrap框架只有datepicker和timepicker控件.所以在jQuery库中找到轻量级的datetimepicker插件,很好地解决 ...