.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# 通过Process.Start() 打开程序 置顶方法

    private void webBrowser1_Navigating(object sender, WebBrowserNavigatingEventArgs e) { try { foreach ...

  2. More development resources

    社区 名称 官网 google https://www.google.com/ github https://github.com/ StackOverflow https://stackoverfl ...

  3. Luogu P2516 [HAOI2010]最长公共子序列 DP

    首先$LIS$显然:$f[i][j]=max(f[i][j-1],f[i-1][j],(a[i]==b[j])*f[i-1][j-1])$ 考虑如何转移数量: 首先,不管$a[i]$是否等于$b[j] ...

  4. prevAll([expr]) 查找当前元素之前所有的同辈元素

    prevAll([expr]) 概述 查找当前元素之前所有的同辈元素 可以用表达式过滤.大理石构件维修 参数 exprStringV1.2 用于过滤的表达式 示例 描述: 给最后一个之前的所有div加 ...

  5. CPU结构及段地址偏移地址的概念

    原文地址:http://blog.csdn.net/yihuiworld/article/details/7533335#comments 程序如何执行: CPU先找到程序在内存中的入口地址 -- 地 ...

  6. CodeForces Good Bye 2016

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

  7. Java String和hadoop的Text差异性比较

    Text类似于String,UTF-8编码.采用整型储存长度,最大长度为2GB. 补充编码知识: ASCII码 英语字母标点符号等256个字符,一个字节储存,取值0x00-0x7F; UNICODE编 ...

  8. 预处理、const、static与sizeof-为什么要引入内联函数

    1:引入内联函数的主要目的是,用它替代C语言中表达形式的宏定义来解决程序中函数调用的效率问题.在C语言里可以使用如下的宏定义: #define ExpressionName(Var1,Var2) (V ...

  9. ci 框架中defined('BASEPATH') OR exit('No direct script access allowed');

    作用: OR 就是前面的是true时,就不走后面了. 加这个是为了防止不是从index.php访问到的控制器

  10. 性能测试 | Linux系统top命令中的io使用率,很多人都误解了它的具体含义

    body{ text-align:left; width:80%; margin:10px 100px; } 最近在做连续数据流的缓冲系统,C语言代码实现后,粗略测试了下,功能上应该没有问题.那么,接 ...