.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. 12 saltstack部署OpenStack

    参考源码:https://github.com/unixhot/salt-openstack nova control.sls

  2. Jmeter测试部全体学习

    Jmeter小助手:__counter   __Random   __UUID   __CSVRead 性能指标:CPU  内存  磁盘  网络   版本(系统版本) linux命令: top 能够试 ...

  3. python mysql插入中文乱码

    # "INSERT INTO" 语句sql = "INSERT INTO sites (name, url, status, enable) VALUES (%s, %s ...

  4. PHP mysqli_init() 函数

    定义和用法 mysqli_init() 函数初始化 MySQLi 并返回 mysqli_real_connect() 使用的对象. 语法 mmysqli_init();   实例 mysqli_ini ...

  5. Ubuntu16.04从源码部署安装禅道过程记录

    1.首先把基础的lamp环境搭建好,这里利用apt安装即可 sudo apt install mysql-server sudo apt install apache2 sudo apt instal ...

  6. 集合家族——LinkedList

    一.概述: LinkedList 与 ArrayList 一样实现 List 接口,只是 ArrayList 是 List 接口的大小可变数组的实现,LinkedList 是 List 接口链表的实现 ...

  7. 第七章 python基础之函数,递归,内置函数

    五 局部变量和全局变量 name='cyj' #在程序的一开始定义的变量称为全局变量. def change_name(): global name #global 定义修改全局变量. name=&q ...

  8. Leetcode题目206.反转链表(简单)

    题目描述: 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 进阶: ...

  9. Mybatis传递多个参数进行SQL查询的用法

    当只向xxxMapper.xml文件中传递一个参数时,可以简单的用“_parameter”来接收xxxMapper.java传递进来的参数,并代入查询. 但是,如果在xxxMapper.java文件中 ...

  10. .net reflector

    https://www.red-gate.com/dynamic/products/dotnet-development/reflector/download https://github.com/s ...