固定定位居中translateX(-50%)

最新推荐文章于 2024-05-31 18:26:22 发布
最新推荐文章于 2024-05-31 18:26:22 发布
阅读量1.5k 收藏 4
点赞数 1
分类专栏： web移动端前端 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/122243055
版权

translateX(-50%)  如果是百分比的话那么就是移动盒子自身宽度的-50%

还有一种方法就是不写left:50%,不写translateX(-50%) ，最终默认也会居中对齐

 

快乐de馒头
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS元素居中
azurecho
10-26 283
文章目录CSS元素居中水平居中flex布局text-alignmarginposition+(margin/transform)垂直居中flex布局table+vertical-align单行inline：height=line-heightposition+(margin/transform)水平垂直居中flextableposition+(margin/transform)margin CSS...
translate 的50%是相对于自己的
jasonjkj的博客
09-19 2554
head> meta charset="UTF-8"> title>Titletitle> style> /*translate 的50%是相对于自己的 子元素的百分比高度是根据父元素的高度来确定的， 所以只要设置了父元素的高度，子元素的高度百分比才会有用。 但是(之前没想那么多) trans
针对固定定位/绝对定位元素实现水平垂直居中的方法
最新发布
weixin_68658847的博客
05-31 262
针对固定定位/绝对定位元素实现水平垂直居中的方法
css定位时使用transform: translateX(-50%)水平居中
最爱喝怡宝的博客
02-14 736
用于一个没有父级的元素 ，定位后水平居中，上代码、简单记录一下，每次用都会忘记。
一行代码实现按钮绝对定位并居中
秀强的专栏
04-14 989
文章目录前情Code 前情 开发中经常会碰到需要将按钮绝对定位到屏幕最下方，并且居中的需求。 样式如图： Code position: fixed; transform:translateX(-50%);
css中的“ transform: translate(-50%, -50%)； “的意思
qq_45207162的博客
06-14 5813
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
浅谈css处理水平居中的问题
09-24
transform: translateX(-50%); } ``` 以上是CSS处理水平居中问题的几种常见方法。选择哪种方法取决于具体的设计需求和元素的特性。在实际开发中，还可以结合使用Flexbox或Grid布局来实现更灵活和强大的居中效果...
DIV+CSS DIV居中布局
03-19
`和`transform: translateX(-50%);`使元素相对于其最近的非静态定位祖先元素居中。例如： ```css .centered-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` ...
5.（vue3.x+vite）水平垂直居中实现方式.rar
09-22
3. **Position绝对定位**：对于固定尺寸的元素，可以使用绝对定位。设置父容器的`position: relative;`，然后将子元素的`position: absolute;`，并调整`top: 50%; left: 50%; transform: translate(-50%, -50%);`。 ...
列表图片自动居中
03-29
transform: translateX(-50%);`来使其水平居中，再用类似方法实现垂直居中： ```css .container { position: relative; } .image { position: absolute; top: 50%; left: 50%; transform: translate(-50...
CSS3手机移动端上下左右居中特效代码
03-20
transform: translateX(-50%);` 来实现水平和垂直居中。 - **Flexbox**：将父元素设置为 `display: flex; justify-content: center; align-items: center;`，即可实现子元素的双向居中。 - **Grid**：使用 CSS ...
translate()函数，水平垂直居中
weixin_58431406的博客
06-14 1685
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。
transform:translate(-50%,-50%)实现水平垂直居中
weixin_38203203的博客
01-18 5463
.content {     padding:10px;     background:green;     color:#fff;     position:absolute;     top:50%;     left:50%;     border-radius: 5px;     -webkit-transform: translate(-50%,-50%);     -moz-trans...
详解transform:translate(-50%,-50%)
热门推荐
qq_41083105的博客
03-26 3万+
关于transform:translate(-50%,-50%) 这个其实就是一个位移的属性，translatex在x轴方向上进行移动，反之translatey实在y轴方向，而translate括号里的两个参数是先x后y的。 这句话的应用场景是实现块居中，具体实现如下： <style> .outer { width: 300px; height: 300px; posit...
居中，transform：translate(x,y)来设置居中
leixu1027的博客
10-18 1704
我在以前也写过margin和flex的博客，可以自行查看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ ...
Translate实现水平垂直绝对居中
weixin_30787531的博客
09-17 197
translate实现绝对居中效果。 translate一直是我实现居中效果众多属性中最多的一个属性，我认为这个属性简单，使用方便，在此小记。 translate(X,Y)定义2D转换，其中X是定义X轴的值，Y轴是定义Y轴的值。 　　　　　　 position: absolute; left: 50%; top: 50%; ...
css 平移到某个位置_CSS3 对象平移translate()translatex()translatey()应用实例，包括水平垂直居中...
weixin_39923262的博客
12-21 1955
CSS3新增了制作动画功能，既然是动画就少不了移动，因此平移属性translate随之增加。translate主要用于控制对象的移动，它又可分为translatex()和translatey()，前者控制对象沿X轴移动，后者控制对象沿Y轴移动，translate既可控制对象沿X轴移动又可控制对象沿Y轴移动，当然也能控件对象同时沿X和Y移动。translate相对来说是transform中比较简单的...
CSS核心(day02)
Y565437520的博客
12-18 203
四、转换(☆☆☆☆☆☆☆☆☆☆) 1.什么是转换 改变元素在页面中的位置,大小，角度以及形状 2D 转换 X轴和Y轴上的转行 3D 转换 模拟的,添加了z轴 2.转换的属性 属性： transform： transform-function 转换函数: 2D：4个 3D：1个 3.2D转换 ①位移 transform：translate() 取值 translate(x) 设置在x轴位移...
变形--位移 translate()
09-27 908
translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅
footr固定在网页最下方居中
07-15
transform: translateX(-50%); } ``` 上述代码将 footer 元素的定位方式设置为固定位置（fixed），使其始终位于浏览器窗口的底部。使用 `bottom: 0;` 将其定位到底部，而 `left: 50%;` 和 `transform: translateX...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值