首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

仅使用绝对\left将两个不同宽度的不同元素居中,如何计算偏移?

要将两个不同宽度的不同元素居中,可以使用绝对定位和left属性来实现。偏移量的计算可以通过以下步骤进行:

  1. 首先,给父元素设置相对定位,以便作为参考点。
  2. 给要居中的元素设置绝对定位,并将其left属性设置为50%。
  3. 使用负边距将元素的左边缘向左移动其宽度的一半,以实现居中对齐。

以下是具体的代码示例:

HTML代码:

代码语言:txt
复制
<div class="parent">
  <div class="element1">元素1</div>
  <div class="element2">元素2</div>
</div>

CSS代码:

代码语言:txt
复制
.parent {
  position: relative;
}

.element1, .element2 {
  position: absolute;
  left: 50%;
}

.element1 {
  width: 200px;
  margin-left: -100px; /* 偏移量计算:-1 * 元素宽度的一半 */
}

.element2 {
  width: 300px;
  margin-left: -150px; /* 偏移量计算:-1 * 元素宽度的一半 */
}

在上述代码中,父元素使用相对定位,两个要居中的元素使用绝对定位,并将left属性设置为50%。然后,通过负边距将元素的左边缘向左移动其宽度的一半,从而实现居中对齐。

请注意,这只是一种实现居中对齐的方法,具体的偏移量计算可能因实际情况而异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

网页元素定位详细解读

(三)absolute(绝对定位) 文档流与偏移元素按照正常文档流排列后,根据top、right、bottom、left属性进行位置偏移。与相对定位不同是,绝对定位会使元素脱离文档流。...宽度自适应与包含块变化: 宽度自适应:当绝对定位元素宽度为auto时,它会适应内容宽度。这意味着元素宽度根据其内部内容大小自动调整。 包含块变化:绝对定位元素包含块会发生变化。...元素会根据top、right、bottom、left属性进行位置偏移,并且也会脱离文档流,具有与绝对定位类似的影响。 不同包含块:固定定位元素包含块与绝对定位不同。...三、定位下居中绝对定位和固定定位中,可以通过以下步骤实现某个方向上居中: 定宽(高):首先确定要居中元素宽度(或高度,如果是垂直方向上居中)。...可以通过设置具体像素值或使用相对单位来确定宽度或高度。 设置距离为 0:元素左右(或上下,如果是垂直方向上居中)距离设置为 0。

18310

HTML & CSS页面布局之定位

c) absolute 绝对定位,元素脱离标准流,浏览器把它视作块级元素,不论定位之前它是何种元素,其他元素无视它。绝对定位偏移量是相对于其有定位属性第一个祖先元素。...在使用绝对定位时有两个注意点:第一个是如果网页宽高较大时(大于浏览器可视区宽高),并且元素最终相对于body定位了,实际上它只是相对浏览器首屏宽高进行偏移,而不是整个网页宽高。...绝对定位一般和相对定位配合使用,父元素设置相对定位,但不设置偏移量(默认为0),子元素设置绝对定位,这样就可以把子元素偏移控制在父元素之内。...两列布局 左侧定宽右侧自适应宽度两列布局常用方式有下面几种: 1,左边脱离标准流,右边使用margin属性使其偏移 .left{ width:200px; float:left;...圣杯布局和双飞翼布局区别:除了HTML代码结构不同外,圣杯布局center宽度即为内容区宽度left和right靠在其两边。双飞翼布局center宽度等于内容区宽度left和right宽度

5.5K10
  • 前端成神之路-定位

    bottom bottom: 80px 底部偏移量,定义元素相对于其父元素下边线距离。 left left: 80px 左侧偏移量,定义元素相对于其父元素左边线距离。...父元素要有定位 元素依据最近已经定位(绝对、固定或相对定位)元素(祖先)进行定位。 ?...观察下图,思考一下在布局时,左右两个方向箭头图片以及父级盒子定位方式。 ? 分析: 方向箭头叠加在其他图片上方,应该使用绝对定位,因为绝对定位完全脱标,完全不占位置。...在使用绝对定位时要想实现水平居中,可以按照下图方法: ?...left: 50%;:让盒子左侧移动到父级元素水平中心位置; margin-left: -100px;:让盒子向左移动自身宽度一半。 案例演示:相对定位案例。 盒子居中定位示意图 ?

    1.9K20

    大型编程电视剧连载 | CSS知识点硬核整理归纳(二)

    浮动元素互相贴靠一起,但是如果父级宽度装不下这些浮动盒子, 多出盒子会另起一行对齐。 6.4、浮动小结 我们使用浮动核心目的——让多个块级盒子在同一行显示。...7.2、边偏移 简单说, 我们定位盒子,是通过边偏移来移动位置。 在 CSS 中,通过 top、bottom、left 和 right 属性定义元素偏移:(方位名词)。...left left: 80px 左侧偏移量,定义元素相对于其父元素左边线距离。 right right: 80px 右侧偏移量,定义元素相对于其父元素右边线距离 定位盒子有了边偏移才有价值。...浏览器可视窗口 + 边偏移属性 来设置元素位置; 跟父元素没有任何关系;单独使用 不随滚动条滚动。...不需要父级 边偏移需要和定位模式联合使用,单独使用无效; top 和 bottom 不要同时使用left 和 right 不要同时使用

    1.8K20

    建议收藏!总结了42种前端常用布局方案

    于 -margin 用法,但是该方法不需要手动计算宽度。...定位实现水平垂直居中方案(一) 步骤如下: 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素偏移量,值为50% 减去宽度/高度一半 实现CSS代码如下: .parent { /* 1....定位实现水平垂直居中方案(二) 步骤如下: 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素偏移量,值为50% 通过外边距-值方式元素移动回去 实现CSS代码如下: .parent {...定位实现水平垂直居中方案(四) 步骤如下: 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素偏移量,值为50% 通过 translate 反向偏移方式,实现居中 实现 CSS 代码如下:...通过position实现 实现步骤 左右两列脱离文档流,并通过偏移方式到达自己区域 使中间自适应宽度为父级容器减去两个定宽列 通过外边距容器往内缩小 实现CSS代码如下: .left {

    4.2K30

    建议收藏!总结了 42 种前端常用布局方案

    于 -margin 用法,但是该方法不需要手动计算宽度。...定位实现水平垂直居中方案(一) 步骤如下: 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素偏移量,值为50% 减去宽度/高度一半 实现CSS代码如下: .parent { /* 1....定位实现水平垂直居中方案(二) 步骤如下: 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素偏移量,值为50% 通过外边距-值方式元素移动回去 实现CSS代码如下: .parent {...定位实现水平垂直居中方案(四) 步骤如下: 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素偏移量,值为50% 通过 translate 反向偏移方式,实现居中 实现 CSS 代码如下:...通过position实现 实现步骤 左右两列脱离文档流,并通过偏移方式到达自己区域 使中间自适应宽度为父级容器减去两个定宽列 通过外边距容器往内缩小 实现CSS代码如下: .left {

    4.2K30

    CSS中定位详解

    固定定位妙用:如何一个盒子固定在版心右侧(不管页面缩小放大,它一直在版心右侧)。 先让固定定位盒子left: 50% ,此时这个盒子左边框会定位到浏览器/版心中间。...特点: 粘性定位以浏览器可视窗口为参照点移动元素。 粘性定位元素会占有原先位置。 使用粘性定位时必须添加top、left、right、bottom 其中一个属性粘性定位才会生效。...七、定位拓展: 绝对定位盒子居中: 加了绝对定位盒子不能通过margin: 0 auto; 水平居中,但是可以通过以下计算方法实现水平和垂直居中。...left: 50%;  让盒子左侧边框移动到父级元素水平中心位置。 margin-left: -50px;  让盒子向左移动自身宽度一半(假设盒子自身宽度为100px)。...绝对定位(固定定位)会完全压住盒子: 浮动元素不同,只会压住它下面标准流盒子,但是不会压住下面标准流盒子里面的文字(图片),但是绝对定位(固定定位)会压住下面标准流所有的内容。

    1.4K30

    CSS进阶03-定位体系,格式化上下文,常规流

    这意味着它们对之后同胞盒布局没有影响。同时,即便绝对定位盒有外边距margin,也不同其他任何外边距折叠。...2.2 盒偏移box offset:top,right,bottom,left属性 如果某个元素“position”属性具有非“static”值,则该元素将被定位。...left 此属性指定绝对定位盒left margin edge在其包含块left edge向左偏移距离。对于相对定位盒子,偏移量是相对于盒子本身在标准流中位置left edge。...BFC就是页面上一个隔离独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。 计算BFC高度时,浮动元素也参与计算如何生成BFC: 根元素,即HTML元素。...多栏布局(column-*) 在 Flexbox 中也是失效,就是说我们不能使用多栏布局在Flexbox 排列其下元素。 Flexbox 下元素不会继承父级容器宽度

    1.7K10

    margin:auto实现水平垂直居中

    如果要问如何CSS实现绝对定位元素居中效果,很多人心里已经有答案了。...CSS3兴起,使得有了更好解决方法,就是使用transform代替margin. transform中translate偏移百分比值是相对于自身大小,于是,我们可以: .element {..., -50%); /* 50%为自身尺寸一半 */ } 于是乎,无论绝对定位元素尺寸是多少,其都是水平垂直居中显示。...实际上,绝对定位元素居中实现还有另外一种方法,可以说是权衡了上面的尺寸自适应以及兼容性一个方案,其实现核心是margin:auto....; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 有了这个就自动居中了 */ } 代码两个关键点: 上下左右均0位置定位;

    2.1K10

    「学习笔记」CSS基础

    可以使用方位名词或者 精确单位。 如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left top和top left效果一致 如果只指定了一个方位名词,另一个值默认居中对齐。...border、padding、content 当设置为box-sizing: content-box;时,采用标准模式解析计算,也是默认模式; 内盒尺寸计算(元素实际大小) 宽度:Element Height...时,采用怪异模式解析计算; 2....bottom bottom: 80px 「底部」偏移量,定义元素相对于其父元素「下边线距离」。 left left: 80px 「左侧」偏移量,定义元素相对于其父元素「左边线距离」。...定位(position)扩展 绝对定位盒子居中 绝对定位/固定定位盒子不能通过设置margin: auto设置水平居中使用绝对定位时要向实现水平居中,可以按照下面的方法: left : 50%

    3.2K30

    css布局 - 垂直居中布局一百种实现方式(更新中...)

    首先将垂直居中现象和实现方式两大方向细分类如下: ? 接下来逐条累加不同情况下垂直居中实现。...我把两个例子代码挪到一个html页面,惊奇发现,底部剩余空间都是比顶部少4像素! 于是,一不做二不休,我直接使用margin负值让元素再之前基础上向上4像素,竟真的实现了绝对垂直居中。 ?...比如元素宽度是300px时候,我们都知道想要让他再向左移动50%宽度,配合上left:50%;就能实现居中。 刚好,translateX(-50%)自动计算得到就是50%宽度值。...因为没有高度固定,所以无法确切使用margin-top负值实现垂直居中 但是css3中transformtranslate属性,会自动根据盒子高度计算偏移值。...如果relative换成absolute,想实现水平垂直居中弹窗效果时: 因为固定宽度,可以使用margin负值,即margin-left: -300px;实现水平布局。

    3.5K10

    【CSS】绝对定位元素设置 水平 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

    容器需要居中对齐 ; 二、绝对定位 居中设置 ---- 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单方法就是 使用标尺测量父容器宽高 , 通过设置四个边偏移量 , 设置元素...水平 / 垂直 居中 ; 2、先偏移50%再回退固定值 父容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移方式设置居中就会出现问题 ; 先设置 50% 宽度 / 高度 偏移量 , 然后再往回退...盒子一半 宽度 / 高度 偏移量 ; 以 水平居中为例 : 200 x 200 大小盒子 , 通过设置 首先 , 设置 left 左边偏移为 50% , 让子元素左侧 移动到 父容器水平中心位置...; left: 50%; 然后 , 设置 负数 左外边距 , 令 子元素 向左移动 自身 宽度一半 , 需要提前测量 子元素宽度 ; margin-left: -100px; 三、绝对定位元素...水平 / 垂直 居中 ---- 为 80x80 像素尺寸元素设置 水平 / 垂直 居中 ; 设置水平居中 : 先设置子元素左侧移动到水平中心位置 left: 50%; , 再设置 margin-left

    2.4K40

    css 元素居中

    .container { text-align: center; } 2、块级元素水平居中 先给块级元素设置宽度(不设置宽度,块级元素自己占据一整行,何谈居中) 再给块级元素设置margin:0 auto...2、绝对定位实现垂直居中 (1)demo, 使用前提是块级元素宽高固定 我是标题 <div...: 50%; //使用绝对定位,让dialog起点偏移到页面的中央 top: 50%; margin-left: -200px;//通过负margin,偏移dialog宽高一半,让dialog...通过负margin,偏移dialog宽高一半,让dialog处于正中。不用relative原因是已经用了绝对定位了,所以只好用负margin。结果如图 ?...(3)块级元素宽高不固定,就不能用负margin了(margin使用百分比是相对于父元素宽度)。我们可以用css3一个transform属性,transform是相对自身宽高来做偏移

    3.6K20

    CSS入门?一篇就够了!

    外边距实现盒子居中 可以让一个盒子实现水平居中,需要满足一下两个条件: 必须是块级元素。 盒子必须指定了宽度(width) 然后就给左右外边距都设置为auto,就可使块级元素水平居中。...2、计算盒子模型总高度时,还应考虑上下两个盒子垂直外边距合并情况。 3、如果一个盒子没有给定宽度/高度或者继承父亲宽度/高度,则padding 不会影响本盒子大小。...1、边偏移偏移属性 描述 top 顶端偏移量,定义元素相对于其父元素上边线距离 bottom 底部偏移量,定义元素相对于其父元素下边线距离 left 左侧偏移量,定义元素相对于其父元素左边线距离...right 右侧偏移量,定义元素相对于其父元素右边线距离 也就说,以后定位要和这边偏移搭配使用了, 比如 top: 100px; left: 30px; 等等 2、定位模式(定位分类) 在CSS...当position属性取值为absolute时,可以元素定位模式设置为绝对定位。 注意: 绝对定位最重要一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置。

    5.2K20

    【面试题解】CSS布局,定位布局,浮动布局,BFC,IFC,FFC,GFC

    定位布局生成: 通过设置元素 position 属性,可以让元素处于定位布局中,并通过 left、right、top、bottom 属性设置元素具体偏移量。...absolute 绝对定位,元素脱离标准流,浏览器把它视作块级元素,不论定位之前它是何种元素,其他元素无视它。...绝对定位偏移量是相对于其有定位属性第一个祖先元素,另外,绝对定位元素会自动忽略有定位属性祖先元素 padding 属性。...属性垂直对齐,可能是底部对齐,顶部对齐,也可能是基线对齐(默认); 是当 IFC 中有块级元素插入时,会产生两个匿名块元素分割开来,产生两个IFC; 能把在一行上框都完全包含进去一个矩形区域,...行框宽度是由包含块和与其中浮动来决定; IFC 中行框一般左右边贴紧其包含块,但 float 元素会优先排列; IFC 中行框高度由 CSS 行高计算规则来确定,同个 IFC 下多个行框高度可能会不同

    1.6K30

    CSS&HTML面经专题——(三)CSS定位盒模型经典布局浮动布局与BFC

    static 可以认为静态,默认元素都是静态定位,对象遵循常规流。此时4个定位偏移属性不会被应用,也就是使用left,right,bottom,top将不会生效。...relative 相对定位,对象遵循常规流,并且参照自身在常规流中位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中任何元素。...absolute a、绝对定位,对象脱离常规流,此时偏移属性参照是离自身最近定位祖先元素,如果没有定位祖先元素,则一直回溯到body元素。...margin: 0 auto; 复制代码 子元素绝对定位和margin-left: -width/2, 前提是 父元素position: relative 对于宽度未知块级元素 table...使用table标签(或直接块级元素设值为display:table),再通过给该标签添加左右margin为auto。 inline-block实现水平居中方法。

    2K31

    前端常用布局方案总结

    定宽块级元素水平居中(方法三) 当元素开启绝对定位或者固定定位时,left 属性和 right 属性一起设置就会拉伸元素宽度,在配合 width 属性与 margin 属性就可以实现水平居中。...定位实现水平垂直居中方案(方法一) 步骤如下: (1). 使子元素相对于容器元素定位; (2). 子元素开启绝对定位; (3). 设置该元素偏移量,值为50% 减去宽度/高度一半。...定位实现水平垂直居中方案(方法二) 步骤如下: (1). 使子元素相对于容器元素定位; (2). 子元素开启绝对定位; (3). 设置该元素偏移量,值为50%; (4). ...定位实现水平垂直居中方案(方法四) 步骤如下: (1). 使子元素相对于容器元素定位; (2). 子元素开启绝对定位; (3). 设置该元素偏移量,值为50%; (4)....左右两列脱离文档流,并通过偏移方式到达自己区域; (2). 使中间自适应宽度为父级容器减去两个定宽列; (3). 通过外边距容器往内缩小。

    2.7K30

    CSS笔记(14)

    偏移属性 示例 描述 top top : 80px 定义元素相对其父元素上边线距离 bottom bottom : 80px 定义元素相对其父元素下边线距离 left left : 80px 定义元素相对其父元素左边线距离...数字后面不能加单位 只有定位盒子才有z-index属性. 绝对定位盒子居中 想要实现绝对定位盒子居中,想要用原来margin:auto是会失效(相对定位是可以!!!)...可以看到是无效 这个时候我们采取方法是:先让盒子left:50%,然后距离左边距一半自身盒子宽度距离,水平居中和垂直居中原理是相同....块级元素添加绝对或固定定位,如果不给宽度或者高度,默认大小是内容大小(不加定位的话宽度是父级元素宽度). 浮动元素,绝对定位(固定定位)元素都不会触发外边距合并问题....浮动元素不同,只会压住它下面标准流盒子,但是不会压住下面标准流盒子里面的文字(图片),因为浮动产生初衷就是做出文字围绕效果.但是绝对定位(固定定位)会压住下面标准流所有的内容.

    59310
    领券