(一)如果已知子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. CSS:百科

    ylbtech-CSS:百科 1.返回顶部 CSS (层叠样式表) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标 ...

  2. Openstack 中的消息总线 & AMQP

    目录 目录 消息总线 消息总线的原理 AMQP 消息总线 Openstack 采用了面向服务的开发模式(有别于面向对象和面向过程),需要我们去考虑各个服务之间和各项目之间是如何传递消息的. Restf ...

  3. 作用域 {}代码块 const修饰符 引用

    简单分为:全局作用域.局部作用域.语句作用域 如果希望在局部变量的作用域内使用同名的全局变量,可以在该变量前加上“::” ::aver=20 #include<iostream> usin ...

  4. 数据挖掘 FP-tree算法C++实现及源码

    FP-growth挖掘算法 步骤一 扫描数据库,扫描数据库一次,得到频繁1-项集,把项按支持度递减排序,再一次扫描数据库,建立FP-tree 步骤二 对每个项,生成它的 条件模式库 步骤三 用条件模式 ...

  5. VC++ 2010 创建高级Ribbon界面详解(1)

    运用 VC++ 2010 创建高级 Ribbon 界面详解,包括 Ribbon 界面的结构层次.Ribbon 控件的使用等,ribbon 用户界面,ribbon interface ,ribbon 高 ...

  6. Cyclical Quest CodeForces - 235C 后缀自动机

    题意: 给出一个字符串,给出一些子串,问每个子串分别在母串中圆环匹配的次数, 圆环匹配的意思是将该子串拆成两段再首位交换相接的串和母串匹配,比 如aaab变成baaa,abaa,aaba再进行匹配. ...

  7. DO_DEVICE_INITIALIZING

    这个东西的位置在DEVICE_OBJECT的Flags字段中, 本来这个Flags大多的情况下都是在设置IO方式,如DO_BUFFERED_IO, 但特殊的位也可能需要在这里设置. 用处是防止当自己的 ...

  8. Spring入门(二)

    Spring IOC&DI 控制反转(inversion of control):控制什么?什么反转? 我们都知道,传统的程序中,如果A类需要使用B类对象,会在程序中直接创建B类对象实例,此时 ...

  9. systemctl命令的使用及服务状态的查看

    二.systemctl命令 systemctl list-units            ##列出当前系统服务的状态 systemctl list-unit-files       ##列出服务的开 ...

  10. memset函数及其用法,C语言memset函数详解

    在前面不止一次说过,定义变量时一定要进行初始化,尤其是数组和结构体这种占用内存大的数据结构.在使用数组的时候经常因为没有初始化而产生“烫烫烫烫烫烫”这样的野值,俗称“乱码”. 每种类型的变量都有各自的 ...