(一)如果已知子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. Java-Class-@I:io.swagger.annotation.ApiOperation

    ylbtech-Java-Class-@I:io.swagger.annotation.ApiOperation 1.返回顶部   2.返回顶部 1. package com.ylbtech.api. ...

  2. (5)centos7 文件权限

    一. 目录信息 1.第一列 一共10位 (1)第1位表示 当为[ d ]则是目录 当为[ - ]则是文件 若是[ l ]则表示为连结档(link file): 若是[ b ]则表示为装置文件里面的可供 ...

  3. socket模拟通信

    import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java ...

  4. HTML a标签文字颜色

    1.css代码: a{color:#00F} a:hover{color:#f00}/* 鼠标经过悬停字体颜色 */ /* css 注释说明:以上代码为设置HTML中超链接统一字体颜色 */ .div ...

  5. 2019牛客多校第二场A-Eddy Walker

    Eddy Walker 题目传送门 解题思路 因为走过所有的点就会停下来,又因为是从0出发的,所以当n>1时,在0停下来的概率为0,其他的为1/(n-1); 代码如下 #include < ...

  6. 如何使用Intellij IDEA工具导入SVN项目

    Intellij IDEA是目前主流的IDE开发工具,工程项目导入也是必不可少的操作,本文讲述如何用 IDEA工具导入SVN项目. 步骤一:选择VCS打开Intellij IDEA开发工具,在导航栏中 ...

  7. PAT_A1130#Infix Expression

    Source: PAT A1130 Infix Expression (25 分) Description: Given a syntax tree (binary), you are suppose ...

  8. 2019河北省大学生程序设计竞赛(重现赛)J-舔狗 (拓扑排序)

    题目链接:https://ac.nowcoder.com/acm/contest/903/J 题意:给你 n 个舔狗和他喜欢的人,让你俩俩配对(只能和喜欢它的和它喜欢的),求剩下的单身狗数量. 思路: ...

  9. Hbase时间同步

    如果Hbase的时间没有同步,启动主节点会起来,子节点的regionServer就不会起来. 错误日志如下: aused by: org.apache.hadoop.hbase.ipc.RemoteW ...

  10. 无法CREATE UNIQUE INDEX;找到重复的关键字