absolute布局元素，水平居中方法(核心点是:减去自身宽度一半)

最新推荐文章于 2024-03-27 20:04:50 发布
最新推荐文章于 2024-03-27 20:04:50 发布
阅读量829 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35795555/article/details/118579957
版权

知识点:
组件宽度不固定的情况下，根据组件宽度百分比，调整位置
// 往左移动自身宽度一半长度
transform: translate(-50%)

   position: absolute;
   left: 50%; // 放到中间位置
   transform: translate(-50%);// 还需要减去自身宽度的一半

ab

weixin_35795555
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中元素水平居中显示的方法
02-11 422
CSS中元素水平居中显示的方法 用CSS让元素居中显示并不是件很简单的事情。同样的CSS居中设置在不同浏览器中的表现也各有千秋。本文就介绍了在CSS中常见的几种让元素水平居中显示的方法。 1.使用自动外边距实现居中 CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些...
absolute元素水平居中
weixin_30216561的博客
11-06 181
原始（未居中）： 1 .con{ 2 width:200px; 3 height:200px; 4 background:#ccc; 5 position:relative; 6 } 7 .abs{ 8 width:40px; 9 height:20px; 10 background:steelblue; 11 posit...
[CSS] position:absolute水平居中
刘师傅的博客
11-09 1万+
最近听了周杰伦的《不爱我就拉倒》，感觉周董现在写歌有点任性，反正我就是要这样写，你们爱听不听。好吧，好吧，有才真的是可以为所欲为。不过，周董应该是少量的一些硬核的歌手，很多歌词都是拳拳到肉，不像大部分歌手的歌那样，一顿呻吟。。。说了一堆废话（//▽//） 言归正传，对于设置了position:absolute的元素怎么设置水平居中。 1 __ 最开始的时候一直用了比较蠢的方法，在元素外部套一层...
【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-12 6564
一、问题提出 二、绝对定位 居中设置 1、设置固定尺寸 2、先偏移50%再回退固定值 三、绝对定位元素 水平 / 垂直 居中
CSS常见的让元素水平居中显示的方法
09-27
在CSS布局设计中，使元素水平居中是一项常见的需求，特别是在网页制作中。本文将详细介绍四种常见的CSS方法来实现元素的水平居中显示。 1. **使用自动外边距（Auto Margins）** 这是最推荐的CSS居中方法。通过设置...
元素水平垂直居中的几种方法
01-20
在网页布局设计中，元素的水平垂直居中是一项常见的需求，尤其在响应式设计和动态内容展示中显得尤为重要。本文将介绍四种不同的方法来实现这一目标，每种方法都有其适用场景和优缺点。 首先，我们来看第一种方法，...
CSS网页布局：div垂直居中的各种方法
09-27
CSS Grid布局提供更灵活的二维布局，通过`align-items`和`justify-items`可以轻松实现元素的垂直和水平居中。例如： ```css .container { display: grid; align-items: center; justify-items: center; } ``...
收罗CSS布局中有关水平和垂直居中的N种方法
09-25
将元素的`position`设为`absolute`，同时设置`left`和`right`为`50%`，然后通过负的`margin-left`和`margin-right`（等于元素宽度的一半）来实现居中。这种方法适用于知道元素宽度的情况，但不适用于动态宽度的元素...
CSS各种居中布局方法汇总
12-30
来设置居中效果时，除去博客下介绍的css3方法外，还可以使用负的margin来居中，这样解决了兼容性的问题，但是只适用于宽高已知的情况（因为负的偏移量为元素宽高的一半）。宽高改变时，不再是居中效果。 在这些布局...
Absolute 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
luckychen81的博客
05-14 3819
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 我不是这种实现方法的第一人，可能这只是非常常见的一种小技术，我斗胆将其
Position:absolute居中的方法
热门推荐
kiddii的专栏
01-17 1万+
网上查到两种方法可实现居中：1.绝对居中：position:absolute; top: 0;left:0;right:0;bottom:0; margin: auto;问题：元素水平和垂直方向均为居中，如果只需一个方向居中，需要修改另一个方法的位移，考虑到分辨率等因素，不好调整。2.水平居中：position：absolute; left: 50%; width: 1000px; margin-l
CSS之元素居中方案
WU567_的博客
03-21 203
CSS常用的居中方案 如图的这种情况，我们要让子元素在父容器内上下左右居中，常用的居中方案有： 1、定位 + 拉取自身宽度的一半（这种情况子元素需要固定大小） 2、定位 + 位移 ： 当子元素大小不固定时，我们要让元素居中可以使用transfom:translate(xx%， xx%); 因为translate的百分比是按照子元素来计算的。 此时box2的宽高可不固定，子元素都可以在父容器...
css减去自身宽度的一半,xHTML / CSS：如何使内部div获得100％的宽度减去另一个div的宽度...
weixin_28717431的博客
08-03 547
慕神8447489神秘的人overflow: hidden;是你的朋友。它阻止了与浮动相邻的元素在浮动之后延伸—我想这就是您要寻找的布局。以下是一些经过稍微编辑的HTML：我认为您#的ids中不能包含字符： inner div 1. Some text... inner div 2... 这是实现所需布局的CSS。(我为带有HTML 条件注...
css居中对齐的几种方式
袁成新（Chauncey Yuan）
10-13 762
第一种 css .parent { width: 300px; height: 300px; background: #fff000; display: table-cell; vertical-align: middle; text-align: cen...
14种CSS实现水平或垂直居中的技巧，快来收藏
最新发布
wdsfgj的博客
03-27 2482
原理：利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用transform: translate(-50%, -50%);位移居中元素自身宽与高的50%就能达成居中的目的了。缺陷：translate是css3属性，低版本浏览器不支持。显著优势：无需固定定位元素的宽高。top: 50%;适用情景：多行文字（垂直居中）原理：弹性布局，align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式，参考CSS-TRICKS。
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
923723914
09-11 4327
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; botto...
absolute绝对定位.实现水平垂直居中
qq_45753147的博客
03-07 3683
当容器的position属性值为absolute时，这个容器即被绝对定位了。使用绝对定位的容器，会脱离文档流。 当有多个绝对定位容器放在同一个位置时，显示哪个容器的内容呢？类似Photoshop的图层有上下关系，绝对定位的容器也有上下的关系，在同一个位置只会显示最上面的容器。在计算机显示中把垂直于显示屏幕平面的方向称为z方向，CSS绝对定位的容器的z-index属性对应这个方向，z-index属性的值越大，容器越靠上。即同一个位置上的2个绝对定位的容器只会显示z-index属性值较大的。 如果容器设置.
css实现元素水平垂直居中的五种方法
qq_41166866的博客
05-23 237
css实现元素水平垂直居中的五种方法 html内容 <div class="wrapper"> <div class="box"></div> </div> 确定了元素宽高 有三种方法 第一种方法： .box { position:absolute; top:50%; left:50%; margin-top:-100px;/*减去自身高...
position: absolute水平居中
09-13
要将一个使用 `position: absolute` 属性的元素水平居中，可以使用以下方法： 1. 将元素的左右边距都设置为 `auto`，并将左边和右边的定位属性都设置为 `0`，这样元素就会水平居中。例如： ```css .element { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值