css 未知子元素宽高的居中
.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
使用 translate 对子元素的宽高没有要求,在未知宽高的情况下依然适用。
这种方式在子元素是单行或多行文本的时候要求垂直居中的情况下十分适用。
css 未知子元素宽高的居中的更多相关文章
- CSS子元素居中(父元素宽高已知,子元素未知)
<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...
- css使子元素在父元素居中的各种方法
html结构: <div class="parent"> <div class="child"></div> </di ...
- canvas基础入门(一)canvas的width、height于css样式中的宽高区别
canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- js获取隐藏元素宽高的方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...
- 007. 自定义ListBox的item的宽高, 字体居中
/// <summary> /// 自定义ListBox的item的宽高, 字体居中 /// </summary> /// <param name="sende ...
- js获取精确的元素宽高(普通获取高度会有误差)
当js获取元素宽高时, 并不是一个精确的数字,如果想获取真正的宽高大致方法如下 var oStyle = obj.currentStyle ? obj.currentStyle : window.ge ...
- HTML&CSS基础-子元素和后代元素选择器
HTML&CSS基础-子元素和后代元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html ...
- HTML&CSS基础-子元素的伪类选择器
HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
随机推荐
- 使用EntityFramework6连接MySql数据库-db first方式
准备工具: VS2013.MySQL For VisualStudio 1.1.4.Connector/Net 6.8.3 程序包管理器执行命令: Install-Package EntityFram ...
- rsync 同步操作
同步:增量拷贝,只传输变化过的数据 rsync [ 选项] 源目录/目标目录 -a :归档模式 相当于 -rlptgoD -v:显示详细操作信息 -z:传输过程中启用压缩/解压 --delet ...
- php实现浏览器大文件分片上传
PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...
- 洛谷P4979 矿洞:坍塌
洛谷题目链接 珂朵莉树吼啊!!! 又是一道水题,美滋滋~~~ $A$操作完全模板区间赋值 $B$操作也是一个模板查询,具体看代码 注意:读入不要用$cin$,会$T$,如果你是大佬,会玄学东西当我没说 ...
- 第72节:Java中的数组
https://www.jianshu.com/p/9ad176caa5bc
- SSO 断点登陆
1. 摘要 ( 注意:请仔细看下摘要,留心此文是否是您的菜,若浪费宝贵时间,深感歉意!!!) SSO这一概念由来已久,网络上对应不同场景的成熟SSO解决方案比比皆是,从简单到复杂,各式各样应有尽有!开 ...
- JDK快捷安装,以及详细安装步骤
一,直接快捷安装 安装JDK之前先打开终端输入以下内容检查是否有JDK环境 java javac java -version 输入完弹出一堆东西就是安装完成了 如果安装可以使用 rpm -qa | g ...
- PL/SQL中直接写SQL语句和用EXECUTE IMMEDIATE方法的区别
PL/SQL中直接写SQL语句和用EXECUTE IMMEDIATE方法的区别 在PL/SQL中在执行SQL语句时可以直接写SQL或者可以把一个SQL语句拼成一个字符串,如下: select * fr ...
- Kafka 实践
问题描述 配置 Kafka-client 2.x, Spring-Kafka 默认配置 Kafka 三个partition, 使用KafkaListener按group消费. 现象 某天突然发现两个p ...
- Java实验报告(一)
Java实验报告(一) 实验过程 1. 打印输出所有的"水仙花数",所谓"水仙花数"是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个" ...