.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. BZOJ 4802: 欧拉函数 (Pollard-Rho)

    开始一直T,原来是没有srand- CODE #include<bits/stdc++.h> using namespace std; typedef long long LL; vect ...

  2. curl查看http请求消息的时长

    1. -X 指定请求方式GET请求curl -X GET http://www.jackyops.com/search?data=123  # -X GET是可选的 POST请求curl -X POS ...

  3. SQL server 自定义函数FUNCTION的使用

    原文链接:https://blog.csdn.net/lanxingbudui/article/details/81736402 前言:        在SQL server中不仅可以可以使用系统自带 ...

  4. [Algorithm] Max Chars Problem

    // --- Directions // Given a string, return the character that is most // commonly used in the strin ...

  5. SSO 断点登陆

    1. 摘要 ( 注意:请仔细看下摘要,留心此文是否是您的菜,若浪费宝贵时间,深感歉意!!!) SSO这一概念由来已久,网络上对应不同场景的成熟SSO解决方案比比皆是,从简单到复杂,各式各样应有尽有!开 ...

  6. Java面向对象1(A~F)

    QWQ请假一节课,错过一章内容,只能求助qsh了. C/C++训练1---最大公约数与最小公倍数(SDUT 1131) import java.util.*; class Number { int a ...

  7. 如何自己实现一个HTMLRunner

    在使用unittest框架时,我们常常需要下载一个HTMLRunnerCN.py用来生成HTML格式的报告,那么我们能不能自己实现一个呢? HTMLRunner是模仿unittest自带的TextTe ...

  8. IDEA2019.1.3的安装和破解

    上一篇文章我有写过我会尝试安装IDEA(这玩意儿收费啊!),倘若尝试成功以后都会用它编译,很幸运,我安装成功了,所以今天这篇文章我来写安装和破解方法. IDEA界面: ​ 首先我们访问官方网站:htt ...

  9. 云闪付个人免签支付用xposed解决强制升级

    云闪付的xposed程序之前用的是6.18的版本,前段时间突然不能用了,提示要升级到最新的7.0版本.之前这个云闪付的个人免签支付程序一直跑的挺好,云闪付也是所有免签支付里面最能跑量的,不甘就这么放弃 ...

  10. jwt token and shiro

    openapi可以完全开放访问,也可以使用jwt token进行简单的认证,还可以使用shiro支持更细致的权限管理. handler.yml配置了security和shiro两个handler: s ...