position: absolute 与 transform 来居中块级元素的问题
position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
画一个图应该就很清晰明了了
第一步
第二步
所以本质上理解
1.绝对定位元素的定位基准点是其有定位元素的祖先元素而translate要做偏移,是相对于自身的中心点而言,如果用百分比做单位,参考值就是本身元素的宽度
转自 点击打开链接
position: absolute 与 transform 来居中块级元素的问题相关推荐
- 透彻理解块级元素的宽度
作者按:又翻出来一篇5年前(2006年12月28日)写的关于盒模型的文章,都不知道参考了哪本书了.只能凭印象感谢 Eric Meyer 的<CSS权威指南(第2版)>(The Defini ...
- 行内元素与块级元素居中方法
一.行内元素 前言:觉得之前写的那篇关于水平居中.垂直居中.水平垂直居中的博客写的不太好,所以又整理了一遍. 之前博客的地址 1. 水平居中 方法一:text-algin:center 父元素设置:t ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- html盒子模型图片居中,html学习笔记(img+body+盒子模型+块级元素居中+margi塌陷+float+文字围绕、打点)...
1.使用img产生间隔问题 img属于行级块级元素(标签)其属性display的值为inline-block,因有inline元素,故有文字属性,如果换行使用多个img标签来显示图片的时候,因换行带来 ...
- css text-align属性,行内元素,块级元素居中详解
一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...
- 【CSS】图片底部空白缝隙处理 ( 使用居中对齐 / 顶部对齐 / 底部对齐 | 将行内元素 / 行内块元素转为块级元素 )
文章目录 一.图片底部空白缝隙问题 二.图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) 三.图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 ...
- CSS网页布局心得(样式优先级,块级元素,内联元素,display,position,float)
文章涉及的知识点:CSS,样式优先级,块级元素,内联元素,display,position,float 使用top;right; bottom;right时,要注意是对于哪个元素进行定位,要保证定位元 ...
- css标签显示特性(块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例)
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
- css变成块级元素_css块级元素垂直居中常用布局方式
在项目中经常会用到垂直居中布局,本次通过常用的块级元素居中布局的实现方式来对过程中的技术点包括transform的使用,flex的使用进行梳理.让大家能够理解之后进行举一反三. 以下例子如果未特别说明 ...
最新文章
- python搭建可视化管理平台_搭建可视化数据平台 superset
- ShaderLab学习小结(十九)RenderToCubemap创建能反射周围环境的效果
- Codeforces 508E Arthur and Brackets 区间dp
- boost::breadth_first_search用法的测试程序
- 字符串匹配之KMP---全力解析
- 电脑上玩和平精英_和平精英新手怎么玩 和平精英新手攻略
- 果园机器人的写作思路_《果园机器人》教材理解
- 【Word】利用域代码快速实现公式按章节自动编号
- sqlmap之tamper绕过
- 题6.12:有一行电文,已按照下面规律翻译成密码: A->Z a->z B->Y b->y C->X c->x即第1个字母编程第26个字母,第i个字母编程第(26-i+1)个字母,非字母字符不变,要求
- SVN解决 Node remains in conflict
- 我的世界启动器+账号+密码
- oracle自动化巡检报告
- AliOS Things的SDK ESP8266 连接阿里生活物联网平台 配网失败解决方案
- Vue全家桶学习笔记:Vue Router篇
- 计算机锁屏打不开,电脑点锁屏锁不了怎么办
- java log写入txt文件_使用java.util.logging.Logger时如何在文本文件中写日志
- matlab cody学习笔记 day18
- js函数(function)
- 【PyTorch深度学习项目实战100例目录】项目详解 + 数据集 + 完整源码
热门文章
- 数字次数统计器----数字出现次数统计器
- 程序员怎么向上管理领导拿高绩效!
- linux显示文件内容行号,linux命令显示文件内容行号|linux将内容以行号显示出来...
- 报错:Error,关于运行localhost://8080/一直提示:“源服务器未能找到目标资源的表示或者是不愿公开一个已经存在的资源表示。“的可能问题集合。
- 基于js,localStorage的商品列表和购物车案例
- Mac 上如何安装Mysql?
- 打码打码Python爬虫,某省建筑市场请求地址参数分析,手慢无爬虫
- Ajax轮询定时的通过Ajax查询服务端
- MUI在搜索框输入内容后,将手机软键盘右下角的换行变成搜索
- 微信小程序使用Vant Weapp