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

当父元素和子元素具有不同的%宽度时,如何使子div居中

当父元素和子元素具有不同的百分比宽度时,可以使用以下方法使子div居中:

  1. 使用绝对定位和负边距:
    • 将父元素设置为相对定位(position: relative)。
    • 将子元素设置为绝对定位(position: absolute)。
    • 使用left: 50%将子元素的左边距设置为父元素宽度的一半。
    • 使用负边距(margin-left: -子元素宽度的一半)将子元素向左移动一半宽度。
    • 示例代码:
    • 示例代码:
  • 使用flex布局:
    • 将父元素设置为flex容器(display: flex)。
    • 使用justify-content: center将子元素水平居中。
    • 示例代码:
    • 示例代码:
  • 使用text-align属性:
    • 将父元素的text-align属性设置为center。
    • 示例代码:
    • 示例代码:

以上是三种常用的方法,可以根据具体情况选择适合的方法来实现子div居中。

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

相关·内容

前端知识点总结(html+css)(上)

常见块级元素、行内元素、行内块元素特点区别 块级元素 (常见块级元素div,p,h,form,li) 一行显示一个; 宽度默认为容器100%; 可以设置高度宽度内外边距 块级元素可以包含其他块级元素和文本...(如div下可包含div) 行内元素(常见行内元素a,span.img) 一行显示多个 宽度为内容宽度 不可以设置高度宽度 标签内一般不包含标签(如a标签内包含a标签) 行内块元素 行内块元素包含块级元素行内元素特征...属性alt属性区别 alt属性为了给不能看到图片的人提供文字说明,图片加载失败 title属性可以实现鼠标悬停提示内容 css篇 学习css重点就是清楚了解布局,给你一个页面,你能一眼知道这个页面如何布局...BFC原理(块级格式化上下文) 含义:是页面中一块独立渲染区域,并有一套渲染规则。它决定了其元素如何定位,以及其它元素关系相互作用。...设置为auto或者0,后出现覆盖前面的; 16.各种居中方案 参考文章juejin.cn/post/717980… 水平居中: 行内元素元素设置text-align:center 定宽:margin

25210

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

;淡紫色是级,相对于居中。...定宽块级元素水平居中(方法三) 元素开启决定定位或者固定定位, left 属性 right 属性一起设置就会拉伸元素宽度,在配合 width 属性与 margin 属性就可以实现水平居中。...定宽块级元素水平居中(方法四) 元素开启决定定位或者固定定位, left 属性 transform 属性即可实现水平居中。...定位实现水平垂直居中方案(一) 步骤如下: 使元素相对于容器元素定位 元素开启绝对定位 设置该元素偏移量,值为50% 减去宽度/高度一半 实现CSS代码如下: .parent { /* 1....定位实现水平垂直居中方案(四) 步骤如下: 使元素相对于容器元素定位 元素开启绝对定位 设置该元素偏移量,值为50% 通过 translate 反向偏移方式,实现居中 实现 CSS 代码如下:

4K30

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

;淡紫色是级,相对于居中。...定宽块级元素水平居中(方法三) 元素开启决定定位或者固定定位, left 属性 right 属性一起设置就会拉伸元素宽度,在配合 width 属性与 margin 属性就可以实现水平居中。...定宽块级元素水平居中(方法四) 元素开启决定定位或者固定定位, left 属性 transform 属性即可实现水平居中。...定位实现水平垂直居中方案(一) 步骤如下: 使元素相对于容器元素定位 元素开启绝对定位 设置该元素偏移量,值为50% 减去宽度/高度一半 实现CSS代码如下: .parent { /* 1....定位实现水平垂直居中方案(四) 步骤如下: 使元素相对于容器元素定位 元素开启绝对定位 设置该元素偏移量,值为50% 通过 translate 反向偏移方式,实现居中 实现 CSS 代码如下:

4K30

CSS布局(六) 对齐方式

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

1.9K50

第141天:前端开发中浏览器兼容性问题总结(二)

1、 默认内外边距不同 问题: 各个浏览器默认内外边距不同 解决: *{margin:0;padding:0;} 2、水平居中问题 问题: 设置 text-align: center   ie6-...IE6 width为奇数,右边多出1px问题 问题: 元素采用相对定位,且宽度设置为奇数元素采用绝对定位,在ie6中会出现右侧多出1像素 解决: 将宽度奇数值改成偶数 12....IE6 列表背景颜色失效问题 问题: 元素设置position:relative;,在ie6中第一个ul、ol、dl背景颜色失效 解决:  ul、ol、dl 都设置为position:relative...2、减小第二个容器宽度使容器宽度减去第二个容器宽度值大于3 3、去掉所有的注释。 4、修正注释写法。这里是注释内容<!...容器宽度大于容器宽度,内容超出 问题: DIV宽度DIV宽度都已经定义,在IE6中如果其DIV宽度大于DIV宽度DIV宽度将会被扩展,在其他浏览器中DIV宽度将不会扩展

1.9K21

元素居中多种实现方式!

水平居中 行内元素居中 被设置元素为文本、图片等行内元素,水平居中是通过给元素设置 text-align:center 来实现。...imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 块状元素居中 被设置元素为 块状元素 用 text-align...;inline-block默认宽度为内容宽度,然后给元素设置text-align 优点:兼容性较好,甚至可以兼容IE6 缺点:元素会继承元素text-align,使元素内容也水平居中     DEMO ---- 垂直居中 元素高度确定单行文本 通过设置元素height line-height... 元素高度不确定多行文本 table-cell + vertical-align 竖直居中属性vertical-align,在元素设置此样式,会对inline-block

94320

前端开发中各类型居中方式总结

前端开发中经常用到就是元素居中,有时候不同元素居中方式不同就忘记了,明明已经设置了居中,但却没有效果,搞得人很懵逼,还得去搜索一下,所以今天总结了一下,方便以后查用。...class="father"> 块级元素 未设置宽度: 默认元素宽度元素一样。...class="father"> 块级元素 此时,如果不设置高度宽度宽度将有盒子内容撑开,高度盒子一致。...class="father"> 块级元素 水平垂直居中 _ 已知高度宽度元素 先设置相,然后给元素设置:top: 0;...class="father"> 块级元素 未知高度宽度元素 1.相 设置元素为相对定位,给元素设置绝对定位,然后再给元素设置属性

50610

前端面试之HTML && CSS

box重叠 BFC是一个独立容器,容器里面的元素不会影响到外面的元素 计算BFC高度,浮动元素也参与计算高度 元素类型display属性,决定了这个Box类型。...不同类型Box会参与不同Formatting Context。 如何创建BFC?...值不为visible BFC使用场景 去除边距重叠现象 清除浮动(让元素高度包含浮动元素) 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 让一个元素水平垂直居中 水平居中...margin: 0 auto; (2)绝对定位margin-left: margin-left: (width - width)/2, 前提是元素position: relative 对于宽度未知块级元素...margin实现自适应居中 弹性布局 flex :级设置display: flex; 级设置margin为auto实现自适应居中 级设置相对定位,级设置绝对定位,并且通过位移 transform

4.4K10

前端面试之CSS重点概念精讲

) text-overflow:ellipsis:文本溢出,显示省略符号来代表被修剪文本 white-space:nowrap:设置文本不换行 overflow:hidden:元素内容超过容器宽度高度限制时候...,只需要考虑后代元素 每个层叠上下文是自成体系元素发生层叠时候,整个元素被认为是在层叠上下文层叠顺序中 层叠上下文创建(3类) 由一些CSS属性创建 「天生派」 「页面根元素天生具有层叠上下文...值为absolute或fixed 应用场景 防止margin重叠 将位于同一个BFC元素,分割到不同BFC中 高度塌陷 --- 「计算BFC高度,浮动元素也参与计算」 元素浮动 元素...设置left、top为50%时候,内部元素为方块2位置 设置margin为负数使内部元素到方块3位置,即中间位置 absolute + margin auto absolute +...0(绝对弹性元素),此时相当于告诉flex-growflex-shrink在伸缩时候不需要考虑我尺寸 设置为auto(相对弹性元素),此时则需要在伸缩元素尺寸纳入考虑 align-self

2.4K30

CSS 基础系列:从清除浮动margin塌陷问题谈BFC

从样式上看,具有 BFC 元素与普通容器没有什么区别;但是从功能上,具有 BFC 元素可以看作是隔离了独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器没有的一些特性...3.3.2 BFC 可以包含浮动元素 前面说过,元素没有设置高度元素浮动会导致元素表现为 0 高度,也就是说正常情况下元素无法包含浮动元素。...如果元素宽度足以包含这两个子元素宽度之和,则兄弟元素浮动元素并排。如图: image.png 如果元素宽度不足以包含这两个子元素宽度之和,则兄弟元素会出现在浮动元素下面。...IFC 中是不可能有块级元素插入块级元素(如 p 中插入 div)会产生两个匿名块与 div 分隔开,即产生两个 IFC,每个 IFC 对外表现为块级元素,与 div 垂直排列。...水平居中一个块要在环境中水平居中,设置其为 inline-block 则会在外层产生 IFC,通过 text-align 则可以使其水平居中

2.3K10

寒假提升 | Day10 CSS 第八部分

总结绝对定位相对元素以及常见解决方案 元素绝对定位、 元素相对定位 元素绝对定位 元素绝对定位 元素绝对定位 元素固定定位 三....清除浮动 浮动问题 – 高度塌陷 由于浮动元素脱离了标准流,变成了脱标元素,所以不再向元素汇报高度 元素计算总高度,就不会计算浮动元素高度,导致了高度坍塌问题 解决元素高度坍塌问题过程...,一般叫做清浮动(清理浮动、清除浮动) 清浮动目的是 让元素计算总高度时候,把浮动元素高度算进去 如何清除浮动呢?...比如使容器所有子项等分可用宽度/高度,而不管有多少宽度/高度可用。 比如使多列布局中所有列采用相同高度,即使它们包含内容量不同。...flex container flex container 里面的直接元素叫做 flex item flex container中元素变成了flex item, 具备一下特点: flex item

1.2K20

CSS布局解决方案(居中布局)

:将框设置为绝对定位,移动框,使框左侧距离相对框左侧边框距离为相对框宽度一半,再通过向左移动一半宽度以达到水平居中。...当然,在此之前,我们需要设置框为相对定位,使框成为相对框。...原理:通过将框转化为一个表格单元格显示(类似 ),再通过设置属性,使表格单元格内容垂直居中以达到垂直居中。...将框设置为绝对定位,移动框,使框上边距离相对框上边边框距离为相对框高度一半,再通过向上移动一半高度以达到垂直居中。当然,在此之前,我们需要设置框为相对定位,使框成为相对框。...+transform垂直居中absolute+transform相结合。

1.5K20

CSS 常见面试题速查

选择器出现次数 C 值为 类选择器 属性选择器 伪类 出现总次数 D 值为 标签选择器 元素 出现总次数 比较,权重从左到右依次减小。...,来确定元素位置 如一个绝对定位元素祖父级都为 relative,会相对级来产生偏移 fixed 指定元素相对于屏幕视口(viewport)位置来指定元素位置 元素位置在屏幕滚动不会改变...,并有一套渲染规则,决定其元素如何定位,以及其他元素关系相互作用 即,它是一块独立区域,让处于 BFC 内元素与外部元素相互隔离 如何形成 根元素 position:fixed/absolute...因为元素脱离了元素文档流,所以元素失去了高度,导致了塌陷。要解决这个问题,就是让元素具有高度。... # 盒模型 盒模型是什么 对一个文档进行布局,浏览器渲染引擎会根据标准之一 CSS 基础框盒模型,将所有元素表示为一个个矩形盒子 CSS 决定这些盒子大小、位置以及属性

88510

前端面试题归类-css

如何居中div-水平居中1:给 div 设置一个宽度,然后添加 margin:0 auto; 属性div{ width: 200px; margin: 0 auto;}-水平居中2:利用 text-align...它是页面中一块渲染区域,并且有一套渲染规则,它决定了其元素如何定位,以及其他元素关系相互作用。...按百分比设定一个元素宽度,它是相对于容器宽度计算,但是,对于一些表示竖向距离属性,例如 padding-top , padding-bottom , margin-top , margin-bottom...等,按百分比设定它们,依据也是容器宽度,而不是高度。...100% 区别width: 100% 会使元素box宽度等于元素contentbox宽度width: auto 会元素撑满整个元素,margin, border, padding, content

1.6K40

CSS再学

层叠就是在html文件中对于同一个元素可以有多个css样式存在,有相同权重样式存在,会根据这些css样式前后顺序来决定,处于最后面的css样式会被应用。...每个块级元素都从新一行开始,并且其后元素也另起一行。 2.  元素高度、宽度、行高以及顶底边距离都可设置。 3.  元素宽度在不设置情况下,是它本身容器100%,除非设置一个宽度。...因此一个元素实际宽度(盒子宽度)=左边界+左边框+左填充+内容宽度+右边界+右边框+右边界 填充: 元素内容边框之间可以设置距离,称之为“填充”。...css 中有一个用于竖直居中属性 vertical-align,在元素设置此样式,会对inline-block类型元素都有用。...且默认宽度不占满元素

1.9K70

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

出现滚动条,对象不会随着滚动。 ---- center 与absolute一致,但偏移定位是以定位祖先元素中心点为参考。盒子在其包含容器垂直水平居中。...它就像是relativefixed合体,当在屏幕中按常规流排版,卷动到屏幕外则表现如fixed。该属性表现是现实中你见到吸附效果。...margin: 0 auto; 复制代码 元素绝对定位margin-left: -width/2, 前提是 元素position: relative 对于宽度未知块级元素 table... 复制代码 5、布局题:div垂直居中,左右10px,高度始终为宽度一半 题目:(较简单)纯CSS实现一个长宽比始终为2:1长方形。...元素相对定位,那绝对定位下元素宽高若设为百分比,是相对谁而言

1.9K30

前端常用布局方案总结

定宽块级元素水平居中(方法三) 元素开启绝对定位或者固定定位,left 属性 right 属性一起设置就会拉伸元素宽度,在配合 width 属性与 margin 属性就可以实现水平居中。...定宽块级元素水平居中(方法四) 元素开启决定定位或者固定定位,left 属性 tranfrom 属性即可实现水平居中。...定位实现水平垂直居中方案(方法一) 步骤如下: (1). 使元素相对于容器元素定位; (2). 元素开启绝对定位; (3). 设置该元素偏移量,值为50% 减去宽度/高度一半。...定位实现水平垂直居中方案(方法二) 步骤如下: (1). 使元素相对于容器元素定位; (2). 元素开启绝对定位; (3). 设置该元素偏移量,值为50%; (4). ...使中间自适应宽度级容器减去两个定宽列。

2.5K30

前端面试题2(CSS)

,不会和它元素发生margin折叠 元素自身margin-bottommargin-top相邻也会折 介绍一下标准CSS盒子模型?...:checked 单选框或复选框被选中 如何居中div如何居中一个浮动元素如何让绝对定位div居中?...给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 居中一个浮动元素 //确定容器宽高 宽500 高...视差滚动是指多层背景以不同速度移动,形成立体运动效果,具有非常出色视觉体验 一般把网页解剖为:背景层、内容层悬浮层。...例如,级行高为 1.5,元素字体为 18px,则元素行高为 1.5 * 18 = 27px 百分比:将计算后值传递给后代 设置元素浮动后,该元素 display 值会如何变化?

2.8K11

在未知大小元素中设置居中

提到在web设计中居中元素。关于被居中元素和它元素信息,你知道越多就越容易设置。那么假如当你不知道任何信息?居中也是可设置。...不太困难:知道子元素宽高 如果你知道元素要被居中元素宽和高(并且这些尺寸不会改变),万无一失一个居中做法是绝对定位。 假设你知道待居中元素宽高,但是元素宽和高可变。...---- 困难:不知道子元素宽高 当你不知道待居中元素尺寸,设置元素居中就变得困难了。 ? 最粗俗方式是像下面这样使用table元素设置居中: ?...如果你担心它语义,你可以尝试将它和你内容做个联系。 ? ? CSS tables 可能对你来说可以接受,也可能不能接受。Tables常规块级div相比确实有一些不同地方。...如果在元素中设置ghost元素元素高相同,接着我们设置ghost元素居中元素 vertical-align:middle,那么我们可以得到同样效果。 ?

4K20

弹性(Flex)布局使用

align-content: flex盒内元素具有多条轴时候可以使用。默认是stretch,即轴线占满整个交叉轴。...开发中遇到问题 1、元素被压缩 问题: 设置容器长度flex为1,其他容器长度会被压缩。...解决方法: 设容器width:0;可能出在于容器没有设置宽度,省略符可能需要对元素设置宽度,设置为100%无效,设置为0时候,容器恢复到设定宽度,省略号也出现了。...设置为0,不会自动增长/缩小,防止固定大小元素宽度发生变化。...解决方法: 列表外部使用div或其他盒子包裹,使用flex布局,每个子元素设置最小宽度或实际宽度,或者设width: 0。 ? 使用注意 弹性布局下每一个item默认是没有间隔

2K10
领券