(一)如果已知子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中垂直居中显示的更多相关文章

  1. 让一个父级div根据子级div高度而自适应高度

    需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...

  2. line-height让文本在块级元素中居中显示总结

    一.总结: line-height不仅可以用在段落文本中控制行与行之间的间距,还可以用来控制文本在li这种块级元素中的位置. 文本行间距的大小由字体的大小决定,行间距的大小的设置方法有5种方式:

  3. span(行级元素)在不定高的div(块级元素)中垂直居中的方法

    设置父级元素: align-items: center; display: flex;

  4. 利用css来让一个div在页面中垂直居中的方法

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

  5. css 实现 左右div 等高, 同时父级div就是最高的子div的高度

    原文地址:https://www.cnblogs.com/cbza/p/7145384.html 方法一: 通过父级overflow:hidden,  自己设置padding-bottom 和 mar ...

  6. 高宽不定的div相对父div上下、左右居中

    <div class="parent"> <div class="child">123</div> </div> ...

  7. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  8. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  9. JS获取IMG图片高宽

    前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了 ...

随机推荐

  1. Git 学习第三天(二)

    默认情况下, Git合并是采用"fast forward"模式,但这种模式下,如果删除分支,会丢掉分支信息 禁用 fast forward 模式: git merge --no-f ...

  2. 用js onselectstart事件鼠标禁止选中文字

    禁止鼠标选中文本,针对不同浏览器有不同的写法.常见的是onselectstart表示禁止鼠标选中文本.其中用js可以在页面中写 onselectstart="return false&quo ...

  3. SingalR 构建 推送服务器初探

    项目需要用到推送,于是重新研究了下推送框架,最好能够独立成一个服务,与业务无关的服务,可以给所有的项目通用.找了好久最终决定用SinglR 框架. Signal 是微软支持的一个运行在 Dot NET ...

  4. Flask理论基础(一)视图函数和URL反转函数(url_for)

    一.视图函数 1.1 基本用法试图函数是 app.route 或者 bp.route(蓝图)装饰器装饰的函数.该函数实现了对URL路径的转换,也就是路由功能,例如下面代码定义了默认url ‘/’ 和‘ ...

  5. 笔记41 Spring Web Flow——Demo

    订购披萨的应用整体比较比较复杂,现拿出其中一个简化版的流程:即用户访问首页,然后输入电话号(假定未注册)后跳转到注册页面,注册完成后跳转到配送区域检查页面,最后再跳转回首页.通过这个简单的Demo用来 ...

  6. python 爬取豆瓣电影短评并wordcloud生成词云图

    最近学到数据可视化到了词云图,正好学到爬虫,各种爬网站 [实验名称] 爬取豆瓣电影<千与千寻>的评论并生成词云 1. 利用爬虫获得电影评论的文本数据 2. 处理文本数据生成词云图 第一步, ...

  7. MongoDB启动时遇到的问题

    问题一:child process failed, exited with error number 100 原因分析:100是锁了 解决办法:#cd  /usr/local/mongodb/data ...

  8. CSP-S2019旅游记

    CSP-S2019 你问我为什么写旅游记? 因为好像除了旅游我今年啥都没干 Day0 校内模拟一直被吊锤,考前几场几乎要爆零 这提莫就不是什么好兆头 在家二刷水淹东京完回学校,带了一大堆家当上车 去广 ...

  9. JAVA SE Download

    { //https://www.oracle.com/technetwork/java/javase/downloads/index.html }

  10. Zookeeper_CAP原则

    CAP原则 简单介绍CAP 想要进行分布式事务控制,CAP理论是我们必须要知道的: CAP原则:也叫CAP定理,指的是在一个分布式系统中,一致性.可用性.分区容错性三者不可兼得 一致性(Consist ...