.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

使用 translate 对子元素的宽高没有要求,在未知宽高的情况下依然适用。

这种方式在子元素是单行或多行文本的时候要求垂直居中的情况下十分适用。

css 未知子元素宽高的居中的更多相关文章

  1. CSS子元素居中(父元素宽高已知,子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  2. css使子元素在父元素居中的各种方法

    html结构: <div class="parent"> <div class="child"></div> </di ...

  3. canvas基础入门(一)canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  4. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  5. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  6. 007. 自定义ListBox的item的宽高, 字体居中

    /// <summary> /// 自定义ListBox的item的宽高, 字体居中 /// </summary> /// <param name="sende ...

  7. js获取精确的元素宽高(普通获取高度会有误差)

    当js获取元素宽高时, 并不是一个精确的数字,如果想获取真正的宽高大致方法如下 var oStyle = obj.currentStyle ? obj.currentStyle : window.ge ...

  8. HTML&CSS基础-子元素和后代元素选择器

    HTML&CSS基础-子元素和后代元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html ...

  9. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

随机推荐

  1. 计算机网络|C语言Socket编程,实现两个程序间的通信

    C语言Socket编程,实现两个程序间的通信 server和client通信流程图 在mooc上找到的,使用Socket客户端client和服务端server通信的流程图

  2. 莫比乌斯函数介绍&&基础

    定义 设正整数$N$按照算术基本定理分解质因数为$N=p_1^{c_1}p_2^{c_2} \cdots P_m^{c_m}$,定义函数: $$\mu(N)= \left\{\begin{matrix ...

  3. CSS网站收藏

    css3动画:http://isux.tencent.com/css3/tools.html

  4. 题解 [51nod1161] Partial Sums

    题面 解析 我们设\(f[i]\)表示\(k\)次操作后第一个数在第\(i\)个位置上加了多少次, 而其它的数也可以类推, 第\(i\)个数在第\(j\)个位置加的次数就是\(f[j-i+1]\). ...

  5. Can't load Microsoft.ReportViewer.ProcessingObjectModel.dll

    本机的时候是能正常看到report,但deploy到别的机器上却不行,按说从本机拷个dll过去就可以,但怎么也找不到. 原来要在cmd那里输入C:\WINDOWS\assembly\GAC_MSIL ...

  6. whatis

    whatis 查看命令的说明文档位置及说明 是从数据库中取查找 手动更新数据库 并不是每个命令都有,

  7. git避免提交本地配置文件-来自同事的分享

    在项目协作中,对于已经更改的文件,不同的开发者常常需要根据自己的需要对文件进行更改已满足本地开发环境的需求(这种情况很常见,一般是对项目相关的配置项的更改,对业务逻辑代码的更改一般都是正常的协作编码过 ...

  8. AcWing:178. 第K短路(A*)

    给定一张N个点(编号1,2…N),M条边的有向图,求从起点S到终点T的第K短路的长度,路径允许重复经过点或边. 注意: 每条最短路中至少要包含一条边. 输入格式 第一行包含两个整数N和M. 接下来M行 ...

  9. CodeForces Good Bye 2016

    A题,水题略过. B题,也水,但是想复杂了.只要运动超出[0,20000]的范围就算不可能了. C题,我自己的方法是解不等式,然后取最大的答案即可.代码如下: #include <stdio.h ...

  10. AT3576 Popping Balls

    AT3576 Popping Balls 好题!一种以前没怎么见过的思路! %%ywy 以什么方式,什么位置统计本质不同的方案,才能不重不漏是处理所有计数问题的主心骨. 本题难以容斥.难以DP. 所以 ...