(一)如果已知子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. python之lambda,random,timeit,collections,

    python之lambda,random,timeit,collections,一. python之lambda函数lambda函数又称为匿名函数,匿名函数就是没有函数名的函数.>>> ...

  2. nginx502问题

    常见的502错误1.配置错误因为nginx找不到php-fpm了,所以报错,一般是fastcgi_pass后面的路径配置错误了,后面可以是socket或者是ip:port 2.资源耗尽lnmp架构在处 ...

  3. 3、第一个Appium测试

    运行脚本前环境准备: 1.IDE,推荐使用IJ 2.安装jdk环境,推荐>1.8 3.准备一台真机或者模拟器 4.SDK 5.maven环境 项目目录: CalculatorTest.java文 ...

  4. error C3867: “std::basic_string<char,std::char_traits<char>,std::allocator<char>>::c_str”: 函数调用缺少参数列表;请使用“&std::basic_string<char,std::char_traits<char>,std::allocator<char>>::c_str”创建指向成员的指针

    这个问题找了很多没有找到满意的答案.仔细看了一下,是使用了c_str的问题. 我直接把使用string.c_str的地方使用char*代替即解决问题.

  5. Spark中的多线程并发处理

    Spark中的多任务处理 Spark的一个非常常见的用例是并行运行许多作业. 构建作业DAG后,Spark将这些任务分配到多个Executor上并行处理.但这并不能帮助我们在同一个Spark应用程序中 ...

  6. 绝对 "牛X" 的代码注释,喜欢就拿去用!

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 作者:Blankj https://github.com/Blankj/awesome-comment 写在前面的话:一时兴 ...

  7. Python爬虫工程师必学APP数据抓取实战✍✍✍

    Python爬虫工程师必学APP数据抓取实战  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大 ...

  8. Selenium3 + Python3自动化测试系列八——警告框处理和下拉框选择

    警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...

  9. Spring与Struts2 的整合使用

    Spring与Struts2 的整合使用 项目结构 再Struts2 中(还没有与Spring整合时),它创建Action类的依据 <action name="second" ...

  10. Codeforces 1152D DP

    题意:有一颗由长度为2 * n的合法的括号序列构成的字典树,现在你需要在这颗字典树上选择一些不连接的边,问最多可以选择多少条边? 思路:不考虑题目条件的话,我们只考虑在随意的一棵树上选择边,这是一个贪 ...