.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. eq(index|-index)

    eq(index|-index) 概述 获取当前链式操作中第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个.当参数为负数时为反向选取,比如-1 ...

  2. [Luogu] 次小生成树

    https://www.luogu.org/problemnew/show/P4180#sub 严格次小生成树,即不等于最小生成树中的边权之和最小的生成树 首先求出最小生成树,然后枚举所有不在最小生成 ...

  3. ZOJ - 4114 Flipping Game

    ZOJ - 4114 Flipping Game 题目大意:给出两个串s,t,n个灯泡的序列,1代表开着,0代表关着,一共操作k轮,每轮改变m个灯泡的状态,问最终能把s串变成t串的方案数. 坤神题解. ...

  4. CSP-S2019游记——终点

    准退役一年了,回来苟CSP,填补去年留下的遗憾,也算是为这个不那么完美的高中OI生涯划一个句点吧. DAY 1 考前:昨天晚上睡得不太好.早上洛谷打卡居然是中吉(3K说的大吉嘞???).在地铁上有点犯 ...

  5. E. Intergalaxy Trips

    完全图,\(1 \leq n \leq 1000\)每一天边有 \(p_{i,j}=\frac{A_{i,j}}{100}\) 的概率出现,可以站在原地不动,求 \(1\) 号点到 \(n\) 号点期 ...

  6. Java基础__Java中集合类

    ArrayList:有序.可重复.线程不安全.内部使用数组进行存储 LinkedList:有序.可重复.线程不安全.内部使用引用进行存储[可以很方便的进行插入.删除数据] Vector:有序.可重复. ...

  7. 去除ZERO WIDTH SPACE 零宽字符: 看不见却占位置的字符

    ZERO WIDTH SPACE 由于历史原因,编码方案中保留着该类编码 解决方案 1. 替换 ```js str.replace(/[\u200B-\u200D\uFEFF]/g, ''); ``` ...

  8. Java和python中的面向对象

    Python与Java中的示例类 Java类是在与类同名的文件中定义的.因此,必须将该类保存在一个名为Car.java的文件中.每个文件中只能定义一个类. public class Car { pri ...

  9. Netfilter 之 五个钩子点

    概述 在协议栈的三层IPv4(IPv6还没看,不清楚)数据包的处理过程中,可能经过Netfilter的五个钩子点,分别为NF_INET_PRE_ROUTING.NF_INET_LOCAL_IN.NF_ ...

  10. swoole入门简介

    原文:https://www.cnblogs.com/dormscript/p/4811921.html 本文主要记录一下学习swoole的过程.填过的坑以及swoole究竟有多么强大! 首先说一下对 ...