(一)如果已知子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. jenkins在pipline中运行后台命令

    需求 在jenkin中启动java程序或者python程序的时候,希望程序在后台执行,并在jenkins构建完成之后继续执行.在工作中有两个地方我碰到了这种需求 在shell script输入框中pi ...

  2. System.getenv()和System.getProperty()

    System.getenv() 方法是获取指定的环境变量的值. System.getenv(String str) 接收参数为任意字符串,当存在指定环境变量时即返回环境变量的值,否则返回null. S ...

  3. jeecg 实现lhgDialog窗口传值

    需要在jeecg中的dialog弹框往调用的窗口赋值. 定义内容页调用窗体实例对象接口 var windowapi = frameElement.api ; var W = windowapi.ope ...

  4. C++——代码风格

    google代码风格 1.使用安全的分配器(allocator),如scoped_ptr,scoped_array 2.测试用的,其他的不能用: 2.1 友元 2.2 C++异常 2.3 RTTI 3 ...

  5. webpack中代理配置(proxyTable)

    注:用axios请求 1,下载axios npm i axios --save 2,在config文件下的index.js中配置代理地址 参考:https://vuejs-templates.gith ...

  6. ssh 登陆免 known_hosts 提示

    修改配置文件 “~/.ssh/config”,加上这两行,重启服务器: StrictHostKeyChecking no UserKnownHostsFile /dev/null

  7. hdu6537 /// DP 最长不降子序列->最长公共子序列

    题目大意: 给定一个字符串 字符为0~9 求翻转某个区间后使得串中的最长不降子序列最长 因为字符范围为0~9 假设有一个 0 1 2 3 4 5 6 7 8 9 的序列 此时翻转某个区间得到形如 0 ...

  8. ES6解构

    解构:“解开--重构” 1.数组的解构: //数组的解构: // let arr=[1,2,3,6] // let[a,b,c,d]=arr; // console.log(a,b,c,d)// 1, ...

  9. Laravel 项目运行 phpunit 测试结果只显示点号

    在laravel 项目的根目录下,运行 phpunit 只显示 点号的情况 我尝试将 tests/Unit 和 tests/Feature 目录将 ExampleTest.php 文件删除,然后再运行 ...

  10. Centos Apache 80 代理Tomcat 8080端口

    运行环境:Centos 6.5 Apache: 2.2.5 开启apache proxy的相应模块 编辑 /etc/httpd/conf/httpd.conf文件 sudo vim /etc/http ...