.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. $ python manage.py makemigrations You are trying to add a non-nullable field 'name' to course without a default; we can't do that (the database needs something to populate existing rows). Please selec

    问题: $ python manage.py makemigrationsYou are trying to add a non-nullable field 'name' to course wit ...

  2. 部署openstack

    磁盘扩容  lsblk 设置环境语言 export LANG=en_US 扩容块设备 growpart /dev/vda 1 扩容文件系统 xfs_growfs / 配置Ip 配置eth0为公共网络 ...

  3. ec20 queclocator V1. 0 test

    AT+QICSGP=1,1,"UNIWAP","","",1 AT+QIACT=1 AT+QLOCCFG="contextid&q ...

  4. Casual Literary Notes

    写在前面的话: 人生中总会有一些惊喜,它会给予坚守的人们以奖励,提醒着人们,生命中不光是辛劳和付出. 很多收获,最后看来,往往都是因为当初的那一点坚持. -- 雷宇<现场> 1.18 上午 ...

  5. 【BZOJ3098】 Hash Killer II

    BZOJ3098 Hash Killer II Solution 这道题目好像题面里面给了提示(当然没给就有点难想了.) 曾经讲过一个叫做生日悖论的,不知道还有多少人记得 考虑相同的可能性大概是\(\ ...

  6. iptables 有关计算机名解析问题

    遇到一奇怪现象: 1.开启防火墙(iptables)所有的用计算机名解析的连接全部是失效,但是用IP的一切正常.ping计算机名不通.但是ping IP地址一切OK: 2.关闭防火墙(iptables ...

  7. NSPredicate谓词的用法

    在IOS开发Cocoa框架中提供了一个功能强大的类NSPredicate,下面来讨论一下它的强大之处在哪...NSPredicate继承自NSObject,它有两个派生的子类• NSCompariso ...

  8. js反混淆

    var esprima = require('esprima') var escodegen = require('escodegen') content = "function _0x35 ...

  9. iscc2018-Reverse-writeup

    RSA256 解析公钥 yafu质因数分解 p=325045504186436346209877301320131277983 q=3028255367440967415185462127611943 ...

  10. css实现元素在div底部显示

    #CSS .1 {position:relative;} .2 {;} #HTML <div class="1"> <div class="2" ...