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

当两个div都有绝对位置时,在父div中居中

,可以使用以下方法:

  1. 使用flex布局:将父div设置为flex布局,并使用justify-content和align-items属性将子div水平和垂直居中。
代码语言:txt
复制
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  position: absolute;
}
  1. 使用绝对定位和transform属性:将父div设置为相对定位,子div设置为绝对定位,并使用transform属性将子div平移至父div的中心位置。
代码语言:txt
复制
.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
  1. 使用绝对定位和margin属性:将父div设置为相对定位,子div设置为绝对定位,并使用margin属性将子div居中。
代码语言:txt
复制
.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

以上方法可以实现将两个有绝对位置的div在父div中居中。在腾讯云的产品中,可以使用云服务器(CVM)来搭建云计算环境,详情请参考腾讯云云服务器产品介绍:https://cloud.tencent.com/product/cvm

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

相关·内容

CSS3

---- 结构伪类选择器 根据元素HTML的结构关系查找元素,查找某级选择器的子元素.... 效果: 现在运用到前端,就需要让两个div一个左端,一个右端 特点:类似于图层的概念,脱离了标准流,像两张卡片,叠放在一起,不会影响原标签,一行可以有多个,可以设置宽高... 得到的效果: 剖析: 注意: 添加了相对定位position:relative;后,left和right都有,只有left会生效,top和bottom都有,只有top会生效。...—>子绝相): 1.若级(/爷级…..)有定位属性,根据级为参照进行定位 2.若级无定位属性,根据浏览器窗口进行定位 且具备了行内块特点,可设置宽高。 页面不占位置—>已经脱标。...脱标(页面不占位置)。

76590

HTML & CSS页面布局之定位

有多个元素浮动,他们有以下特点: a) 相同方向上浮动的元素,先浮动的元素会显示在前面。...son2则元素的右侧显示,紧贴元素上*/ c) 如果有未浮动的兄弟元素,那么元素浮动之后,会根据它在标准流位置确定该在第几行展示。...使用绝对定位时有两个注意点:第一个是如果网页宽高较大(大于浏览器可视区宽高),并且元素最终相对于body定位了,实际上它只是相对浏览器首屏的宽高进行偏移,而不是整个网页的宽高。...居中与flex 1,水平居中 如果元素是文本、图片等行内元素,元素设置text-align:center即可实现行内元素水平居中,如果子元素是不定宽块级元素,将子元素的display设置为inline-block...; } /*这样实现垂直居中的原理是:使元素以表格的形式呈现,再利用vertical-align属性表格是设置单元格内容垂直对齐方式的特性,从而达到块级元素垂直居中的效果。

5.4K10
  • CSS-定位(position)

    元素的定位属性 静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 级没有定位 级有定位 子绝相 定位的扩展 绝对定位的盒子水平/垂直居中 固定定位...所谓静态位置就是各个元素HTML文档流默认的位置静态定位状态下,无法通过边偏移属性(top、bottom、left或right)来改变元素的位置。...# 相对定位relative(自恋型) 相对定位是将元素相对于它在标准流位置进行定位,position属性的取值为relative,可以将元素定位于相对位置。...class="son3">son3 结果 # 绝对定位absolute (拼爹型) position属性的取值为absolute...因为子级是绝对定位,不会占有位置, 可以放到盒子里面的任何一个地方。 盒子布局,需要占有位置,因此父亲只能是 相对定位. 这就是子绝相的由来。 <!

    1.5K10

    【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )

    :first-child { /* 结构伪类选择器 选择 容器 第一个 div 标签 */ transform: translate(50%, 50%...); } div:last-child { /* 结构伪类选择器 选择 容器 最后一个 div 标签 */... 执行结果 : 四、Translate 百分比移动实现绝对定位的居中效果 ---- 之前使用 绝对定位 进行居中设置 , 首先 , 走到容器的一半位置 ; 然后..., 再往回走子元素的一半距离 ; 此时就可以实现元素居中设置 ; 设置 第二步 的时候 , 子元素需要往回走一半距离 , 可以使用 Translate 移动 50% 距离实现 ; 1、传统实现方式代码示例...> 显示效果 : 2、百分比移动实现绝对定位的居中效果代码示例 代码示例 : <!

    81230

    CSS再学

    层叠就是html文件对于同一个元素可以有多个css样式存在,有相同权重的样式存在,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。... 这时 p 段落的文本会显示的red红色。 注意:!important要写在分号的前面 这里注意网页制作者不设置css样式,浏览器会按照自己的一套样式来显示网页。...;     top:50px;} 相对定位: positon:relative,通过left、right、top、bottom属性确定元素正常文档流的偏移位置...十六进制颜色 p{color:#00ffff;} 长度值(px) css样式设置小技巧 水平居中 html代码:    我想要在容器水平居中显示...css 中有一个用于竖直居中的属性 vertical-align,元素设置此样式,会对inline-block类型的子元素都有用。

    2K70

    17个场景,带你入门CSS布局

    CSS 布局本质就是控制元素的位置和大小。比如这样的布局:元素宽960px,水平居中。宽960px是大小。水平居中位置。...又如这样的布局:两个元素一行,左侧元素固定宽200px,右侧元素撑满剩余空间。固定宽200px,撑满剩余空间是大小。两个元素一行是位置。 下面,我们从大小和位置两个方面,结合场景来看CSS布局。...值大于0,就会撑满元素宽度的剩余部分。...使用绝对定位前,我们要先了解position的知识。 CSS 的position属性用于指定一个元素文档的定位方式。top,right,bottom 和 left 属性则决定了该元素的最终位置。...绝对定位元素水平居中,距定位元素左侧的值为 50%*定位元素宽度 - 50%*元素宽度。

    2.6K20

    CSS3入门

    属性的值将页面的标签选出来 任何标签都有class属性,不同标签的class值可以是相同的 重点:style标签中使用类选择器必须在前面加上 ....设置为border-box,width和height就是最终宽高,不再受padding影响 外边距塌陷 同—列上下两个元素相邻,并且上有margin-bottom,下有margin-top,会发生塌陷...相对定位 相对定位(relative)是元素相对于自己标准流中原来的位置 不会放弃它在标准流占据的位置 *{ position: relative; } 绝对定位 绝对定位(absolute...)是以带有定位(相对、绝对、固定)的级元素来计算定位位置 如果元素没有定位,则找级的级,..…. 。...子元素使用绝对定位退表,可以元素随意定位。

    1.6K10

    【网页前端】CSS常用布局之定位

    绝对定位 5.1 概述&入门案例 绝对定位:通过设置边偏移,直接将元素放置页面内或元素内的某一位置。...) 3 、 绝对定位边偏移起始位置:默认为页面左上角 5.2 进阶案例 1:父子关系绝对定位 5.2.1 概念及准备代码 绝对定位在未引入父子元素,默认的边偏移起始为:页面左上角。...小结: 元素有定位(相对、绝对、固定),子元素边偏移 从定位元素 左上角开始 5.2.4 示例 3:祖父和元素都有定位 示例:祖父和元素都有定位 小结: 祖父和都存在定位(相对...、绝对、固定),子元素边偏移从 最近元素 的左上角开始 5.2.5 进阶小结 父子关系绝对定位子元素 的边偏移起始位置为: 最近的 定位元素的 左上角 5.3 进阶案例 2:子绝相 为保持元素原有文档流定位...定位,子元素 内 水平垂直居中(如果是 body ,相当于页面水平垂直居 ) 子元素 - 设置: 固定 定位,子元素 页面 内 水平垂直居中 适用于:快速设置子元素的水平垂直居中效果

    1.2K40

    前端基础-CSS定位

    总结: ​ 1.相对定位参考自身在标准流位置进行偏移,移动的出发点是自身标准流的位置 ​ 2.不会对标准流的元素造成影响,没有脱离文档流,移动之后,自身在标准流还占有空间,真正占得位置还是标准流的位置...(灵魂不在 肉体永驻) ​ 3.可以盖标准流的上方 使用场景:微调元素和配合绝对定位来实现效果 3.绝对定位 从父元素一直往上找设置过定位的直系元素,作为自己的偏移参照物,找不到就继续往上找,直到html...(一般都会配合相对定位,但不是绝对的都是相对定位) 相子绝 ---- 案例: ​ 1.让盒子水平垂直居中(水平居中,垂直也居中) 总结:元素使用相对定位(不脱离标准流,写多个不会覆盖),子元素绝对定位(相对于盒子的位置) —相子绝...绝对定位absolute 完全脱标,不占有位置 可以 相对于定位的级移动位置 固定定位fixed 完全脱标,不占有位置 可以 相对于浏览器移动位置 5.定位元素的层叠效果 控制“定位”元素的叠放层级

    62220

    前端基础——CSS+DIV布局

    CSS+DIV布局,就是整体上用标记把页面分为若干个块,然后对各个块进行CSS定位,最后再在各个块添加相应内容。        ...只不过我们搭建整体的网页布局,一般用DIV来充当上例“钢筋”的角色。         盒子模型是DIV+CSS的基础,也是关键。...absolute 生成绝对定位的元素,相对于 static 定位以外的第一个元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。...一般情况下,元素的position属性值为absolute或fixed,它就不再受元素的约束,只根据到页面的left、top、right和bottom的值来定位。  ...页面的内容显示不够多时,如何让最底部的footer(版权注册部分)永远保持最底部,也可以用对margin设置负值的方法来实现。        多多地积累吧,期待与您共同成长。

    2.3K10

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

    : auto; 样式的方式 令盒子水平居中 ; 举例说明 : 绝对定位 的元素 需要居中对齐的地方很多 , 如下图所示 , 右侧的 固定定位 按钮 , 需要在浏览器居中对齐 , 轮播图中的 五个小圆点...; /* 该盒子容器左上角 */ /* 上边偏移 0 紧贴顶部 */ top: 0; /* 左边偏移 50% 左侧紧贴水平居中位置 */ left: 50%;...{ /* 子元素设置绝对定位 元素需要设置相对定位 */ position: absolute; /* 该盒子容器右下角 */ /* 顶部移动到垂直中心位置 */...- 水平居中 */ .top { /* 子元素设置绝对定位 元素需要设置相对定位 */ position: absolute; /* 该盒子容器左上角 */ /* 上边偏移...- 垂直居中 */ .bottom { /* 子元素设置绝对定位 元素需要设置相对定位 */ position: absolute; /* 该盒子容器右下角 */ /

    1.9K40

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

    relative 相对定位,对象遵循常规流,并且参照自身在常规流位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流的任何元素。...盒子的偏移位置不影响常规流的任何元素,其margin不与其他任何margin折叠。...出现滚动条,对象不会随着滚动。 ---- center 与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。...它就像是relative和fixed的合体,当在屏幕按常规流排版,卷动到屏幕外则表现如fixed。该属性的表现是现实你见到的吸附效果。...flex布局使用 justify-content:center 复制代码 垂直居中 通过设置容器相对定位,子级设置绝对定位,标签通过margin实现自适应居中 弹性布局flex:级设置

    2K30

    CSS绝对定位7大应用场景实战案例分享

    今天我们来分享web前端CSS定位的position:absolute绝对定位的应用场景案例的相关场景!...绝对定位是CSS中非常啊哟的知识点,接下来我我们会通过7个不同的层面结合7个不同的案例来展开讲解!...绝对定位元素的特性 使元素完全脱离文档流,将释放自己的位置 元素的层级提升,会覆盖在其它元素上 离自己最近的定位元素进行位置调整,如果没有定位的元素,则相对body进行位置调整 元素支持宽高设置 margin...> 4、相对于body定位-右击显示桌面菜单 当鼠标浏览器窗口右击,会在右击的位置显示对应的桌面菜单。...30天挑战学习计划》每一个细节都有讲到,包含视频+图文教程+项目资料素材等。

    84020

    CSS-垂直|水平居中问题的解决方法总结

    这个总结要一直整理完善,以后有了什么新的想法、新的解决办法都要再修改。可惜不在github,不然可以集思广益了。   ...这种文字行高与块高一致带来了一个弊端:文字内容的长度大于块的宽,就有内容脱离了块。...css 中有一个用于竖直居中的属性 vertical-align,元素设置此样式,会对inline-block类型的子元素都有用。...如果不想二者一样,可以auto后再设置一个:margin: Apx auto Bpx;   auto:水平方向margin,auto就是自动,也算是让css自动计算距离左右的位置吧, 可行性分析:必须要元素定宽...我们可以这样理解: 假想ul层的层(即下面例子div层)中间有条平分线将ul层的层(div层)平均分为两份, ul层的css代码是将ul层的最左端与ul层的层(div层)的平分线对齐; 而li

    2.5K60

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

    5.4.5.2、 嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素,如果元素没有上内边距及边框,元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者的较大者。 ?...静态定位 按照标准流特性摆放位置,它没有边偏移,静态定位在布局我们几乎不用的 。 7.3.2、相对定位(relative) 相对定位是元素相对于它原来标准流位置来说的。...他有两个特点: 相对定位是相对于自己原来标准流位置来移动的。 原来标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。...7.3.3、绝对定位(absolute) 绝对定位是元素以带有定位的级元素来移动位置,也就是我们常说的拼爹。...不能 基本单独使用 绝对定位absolute 完全脱标,不占有位置 相对于定位级移动位置 能 要和定位级元素搭配使用 固定定位fixed 完全脱标,不占有位置 相对于浏览器移动位置 能 单独使用,

    1.8K20

    【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

    ; 2、热点动画位置测量 map 容器 , 定义 city 子元素 , 该子元素使用 绝对定位 放置位置 ; <!...CSS 样式 , 设置其定位方式为 绝对定位 , 根据 " 子绝相 " 原则 , 该子元素 所在的 容器 必须要使用 相对定位 ; 使用 left 和 top 设置 该 子元素 容器内 距离左侧的位移...定位到 地图图片 的 北京 位置 ; 调试 界面 , 找到 city 盒子模型位置 , 双击其 top 和 left 尺寸 , 使用鼠标滚轮修改该 盒子模型 绝对定位的位置 ; Ctrl + 鼠标滚轮...: 50%; /* 绝对定位位置 : 距离左侧的位移 */ left: 50%; /* 保证 波纹 容器 垂直 / 水平...: 50%; /* 绝对定位位置 : 距离左侧的位移 */ left: 50%; /* 保证 波纹 容器 垂直 / 水平

    31420

    【学习笔记】CSS3

    last-child{ background: gold; } /*选择p标签,定位到其父标签,选择当前的第(x)个元素, 该元素与设置的标签一致...img需要放在div) margin是顺时针,只有两个,是上下和左右 margin: 0 auto margin+border+padding+内容宽度 圆角边框 左上开始的顺时针方向 貌似就顺着填...="clear"> .clear{ clear: both; margin: 0; padding: 0; } overflow 级元素增加一个 overflow...绝对定位 仍然基于xx定位 position: absolution 没有级元素定位的前提下,相对浏览器定位 级元素存在定位,会相对于级元素进行偏移 级元素范围内移动(好像可以出去?)...绝对的,不保留原来位置。 固定定位 position: fixed; 固定定位是固定在某个地方,浏览器向下移动页面也不动; 绝对定位是会动的。

    63230

    CSS布局(六) 对齐方式

    如果被设置元素为文本、图片等行内元素元素设置text-align:center实现行内元素水平居中,将子元素的display设置为inline-block,使子元素变成行内元素 ?...(2)块状元素的水平居中(定宽) 被设置元素为定宽块级元素用 text-align:center 就不起作用了。...(3)块状元素的水平居中(不定定宽) 实际工作我们会遇到需要为“不定宽度的块级元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。...: 和水平居中一样,这里要讲垂直居中,首先设定两个条件即元素是盒子容器且高度已经设定 场景1:子元素是行内元素,高度是由其内容撑开的 这种情况下,需要通过设定元素的line-height为其高度来使得子元素垂直居中...3.3相对+绝对定位 使用absolute,利用绝对定位元素的盒模型特性,偏移属性为确定值的基础上,设置margin:auto .parent{ position: relative

    1.9K50
    领券