【CSS 】tansform:translate结合position:absolute实现水平和垂直居中

最新推荐文章于 2023-09-30 13:11:25 发布
最新推荐文章于 2023-09-30 13:11:25 发布
阅读量452 收藏
点赞数
文章标签： css translate 水平和垂直居中 绝对定位 position
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41899098/article/details/117667649
版权
本文介绍了如何结合CSS的transform:translate和position:absolute属性，实现元素的水平和垂直居中。通过在父元素上设置position:relative，并在子元素上使用绝对定位和平移，可以将子元素定位到父元素的中心。注意，50%的值分别对应父元素和子元素的尺寸的一半。
摘要由CSDN通过智能技术生成

HTML

<div class="wrapper">
    <img src="./头像.jpg"/>
    <p>My text, size unknown</p>
</div>

CSS

html, body {
   height: 100%;} /* necessary when using percentage heights withn body
                              on non-absolutely positionedd children(such as .wrapper)
                              http://stackoverflow.com/a/31728799/3597276 */
最低0.47元/天 解锁文章
williamdsy
关注
CSS 实现居中的各种方式
喵喵喵的博客
05-22 2797
总结实现水平居中、垂直居中、水平垂直居中的各种方式
[css] translate实现水平垂直绝对居中
qq_14993591的博客
09-15 267
position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); 这种方法可以不用知道宽高 参考： https://www.cnblogs.com/luna666/p/9662173.html
CSS 实现水平垂直居中方法
sinat_38021004的博客
02-16 353
CSS 实现垂直居中有很多种方法
translate+position实现居中
lele的博客
10-16 573
*{ padding:0; margin:0; } .f{ width:500px; height:300px; background:red; margin
CSS中实现元素水平居中、垂直居中的6个方法（详解）
最新发布
xtcbql的博客
09-30 3万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
css水平垂直居中的六种方法
qq_49691639的博客
01-08 263
## 1、position:absolute绝对定位 .box1 { width: 300px; height: 300px; background-color: orange; position: relative; } .box2 { width: 100px; height: 100px; background-color: blue; position: absolute; top: 0; bottom: 0; left: 0; ri...
【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-12 7587
一、问题提出 二、绝对定位 居中设置 1、设置固定尺寸 2、先偏移50%再回退固定值 三、绝对定位元素 水平 / 垂直 居中
8种垂直居中的方法
Bejpse的博客
03-08 1070
八种垂直居中的方法 垂直居中的需求经常遇到，通过资料实践了八种垂直居中的方法。 以下的方法都围绕着该HTML展开 HTML代码 <div class="wrap"> <div class="box"></div> </div> CSS 方法1（常用）：display：flex .wrap{ width:300px; height:300px; border: 1px solid red; display
CSS 变形(CSS3) transform
热门推荐
快乐de馒头
01-20 4万+
一、2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 变形转换 transform transform 变换 变形的意思 《 transformers 变形金刚》 1、移动 translate(x, y) tr...
HTML元素居中的方法
qq_59971507的博客
08-09 9161
HTML元素水平居中与垂直居中的方法总结
CSS 垂直居中的七种方法——史上最详细总结
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
CSS实现垂直居中的5种方法
m0_56649557的博客
08-20 1万+
第一种 position定位+margin负距离 前提是知道居中元素的宽高，首先给居中元素定位，之后设置margin的负距离为具体宽高的一半便可达到垂直居中效果 <style> .box1 { height: 300px; width: 300px; border: 10px solid pink; position: relative; } .
css——利用translate让元素居中
叶落无痕的博客
08-30 1121
css——利用translate让元素居中 父元素： position: relative; 居中元素： position: absolute; top: 50%; //基于父元素 left: 50%; //基于父元素 transform: translate(-50%, -50%); //基于自身 注意：此方法可能会导致像素模糊问题，因为CSS 的 transform： translate 属性在作元素位移时，极有可能发生像素点无法对齐的情况。正常情况下，元素的边缘应该和像素..
position: absolute 与 transform 来居中块级元素的问题
weixin_44794662的博客
03-18 342
position: absolute; top: 50%; left:50%; -webkit-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -...
position: absolute 与 transform
学习记录
11-09 1877
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 原理：     理解      1.绝对定位元素的定位基准点是其有定位元素的祖先元素      2.而translate要做偏移，是相对于自身的中心点而言，如果用百分比做单位，参考值就是本身元素的宽度...
CSS中：绝对定位position: absolute； left: 50%； 转换transform: translate(-50%)；一起使用，实现一个图片在浏览器页面的居中效果
angrynouse的博客
02-11 1568
<body> <div class="box"></div> </body> -------------------------------------------------------------- <style> .box{ height: 100px; width: 100px; background-color: blue; .
经典：CSS垂直居中的七种方法
weixin_46837985的博客
10-09 1639
点击上方“程序员黑叔”，选择“置顶或者星标”你的关注意义重大！作者：来自互联网我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:...
translate与绝对定位、相对定位的区别
AndrewNeo
07-14 3300
在表现上看，使用 CSS3 translate 函数和绝对定位、相对定位属性加上 top、left 数值都可以使元素产生位移。实际上它们还是有不少的区别。 一：元素视图属性中的 offsetLeft 和 offsetTop 属性。 我们分别用相对定位和 translate 的方法来使元素产生位移： 1.使用相对定位使元素产生位移 *{ margin:0; padding:0; } ...
html tansform
05-05
可以实现平移、旋转、缩放等效果。常用的值有： 1. translate()：平移元素，可以设置平移的距离和方向，语法为：translate(x,y)。 2. rotate()：旋转元素，可以设置旋转的角度和方向，语法为：rotate(angle)。 3....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值