.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. Centos7静态ip设置(亲测有效)

    本文引自:https://www.cnblogs.com/toov5/p/10340395.html,特此鸣谢 最近想测试消息中间件等各类web集群相关技术,这就需要解决linux主机之间互联互通的若 ...

  2. 如何在 Laravel 项目中处理 Excel 文件

    1.Laravel Excel Laravel Excel 是一款基于PHPExcel开发的Laravel框架专用的Excel/CSV 文件导入导出功能的扩展包,用起来的非常方便.它的Github地址 ...

  3. Java 面试题 二

    1.线程怎么保持同步 关于线程同步(7种方式) --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3897440.html"谢谢 ...

  4. [python]@cached_property缓存装饰器

    cached_property缓存装饰器 class cached_property(object): """ Decorator that converts a met ...

  5. Java线程的启动和停止(一)

    如何构造线程 在运行线程之前需要先构造线程对象,线程对象的构造需要指定线程所需要的属性,比如:所属线程组.线程优先级.是否为Daemon线程等信息.下面我们看一下,java.lang.Thread中对 ...

  6. 两个int值相乘超过int最大值

    System.out.println(100000000*1000 ); //输出结果是:1215752192 先将100000000*1000 的结果转化为二进制: 10111 01001000 0 ...

  7. 17.树的子结构 Java

    题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 思路 双递归:外层HasSubtree是一个先根遍历递归,内层isDirectSubTree是一个 ...

  8. 搬运 centos7.2 apache 绑定二级目录 访问依然是apache页面

    <VirtualHost *:80>ServerName xx.comDocumentRoot /var/www/html/xx</VirtualHost>

  9. 状压dp,松鼠从起点出发,拿到所有坚果,然后返回起点,求最短时间。

    UVA10944 松鼠从起点出发,拿到所有坚果,然后返回起点,求最短时间. #include<iostream> #include<cstdio> #include<al ...

  10. 最大生成树+map实现技巧

    POJ2263 //#include<bits/stdc++.h> #include<iostream> #include<cstdio> #include< ...