CSS：父子元素，让子元素居中

最新推荐文章于 2025-06-04 11:28:48 发布
最新推荐文章于 2025-06-04 11:28:48 发布
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： python
原文链接：https://my.oschina.net/u/4045971/blog/3016901
本文介绍了四种使用CSS实现元素在页面中水平垂直居中的方法，包括利用相对定位、触发BFC、绝对定位配合负margin及transform属性。这些技巧适用于不同场景，如已知或未知子元素尺寸的情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

方法1：给子元素加相对定位;（缺点必须要知道父子元素的位置）；

方法2；(父元素触发BFC)子元素加margin-left/margin-top：

方法3：(已知子元素的宽和高)父元素相对定位；子元素绝对定位；在子元素中添加：top:50%;left:50%;Margin-left:-子元素的宽度一半；margin-top:-子元素的一半；

方法4：(不知道子元素的宽和高)父元素相对定位；子元素绝对定位；在子元素中添加：top:50%;left:50%;transform：translate（-50%, -50%）；（此时translate中的百分比指自己的宽和高元素的百分比）;

 

 

转载于:https://my.oschina.net/u/4045971/blog/3016901

CSS中解决父子边界重叠问题
m0_53521757的博客
07-01 2551
CSS中解决父子边界重叠问题 什么情况会出现父子边界重叠问题？        子元素设置了margin-top属性传递给了父元素，导致子元素和父元素相邻的垂直外边距发生重叠。 即： CSS样式代码 #div_01{ height: 300px; width: 300px; background-color: antiquewhite; } #div_02{ margin-
css 实现子元素相对父元素上下左右居中
my_web012的博客
04-24 2029
在排版布局的过程中，我们不难遇到需要实现这么一个要求，我们希望子元素相对于父元素水平和垂直方向上都居中。水平居中相信大家都很熟悉了，只需要设置margin：0 auto就行，但垂直居中的话，就不是那么简单了。下面我就分享一下我所了解的实现这一需求的方法。 首先准备两个盒子，一个parent-box, 一个child-box； 第一种方式，利用position与margin结合 <div cl...
CSS的子元素水平垂直居中
m0_52043522的博客
04-06 1230
前言 水平垂直居中是CSS布局中经常会遇到的一个场景。不同的元素的水平或者垂直居中的策略也是不一样的。 一、水平居中 子元素的水平居中： 普通元素、行内元素、inline-box元素：在父元素中设置text-align:center。 块级元素（宽度确定）：在块级元素自身设置margin: 0 auto，也就是设置margin-left:auto; margin-right:auto;就可以实现了。不用在父元素上设置。 1.普通元素 <style> .box {
CSS选择子元素
BillKu的博客
06-04 513
纯 CSS 只能。
CSS控制子元素水平垂直居中（一）
qq_44606064的博客
03-08 546
子元素水平垂直居中
CSS初入门：设置子元素水平居中的方式
lalala_dxf的博客
04-01 6503
问题描述： 用几种方式实现元素位于父元素的水平居中位置，如图： 解决 方式一 通过控制子元素的左边框和右边框来达到居中的效果。 在那之前，我先举个我遇到过的错误示范 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
css中子元素的居中
weixin_48626324的博客
08-31 503
1.子元素居中 1.行级元素居中 text-align:center; line-height:父级高度； 2.块元素居中 1.给父级元素设置 display:flex; justify-content:center; align-items:center; 2.给父级元素设置 display：flex； 子元素设置 margin：auto; 3.给父元素设置定位属性，，子元素设置绝对定位，子元素配合属性0px；子元素设置margin:auto; 4.父元素设置定位属性，子元素相对定位，子元素top
[HTML] CSS基础教程----解决父子传递的方式，和块元素垂直居中以及cursor的使用
hnspystqxskzlqc的博客
03-30 1006
目录 一、解决父子传递 练习一 二、块元素垂直居中 练习二 三、cursor 四、总结 (接上一期知识，咱们继续讲解。) 一、解决父子传递 margin-top传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的 margin-top值会传递给父元素。 解决方式： 一、给父母设置border边框 二、父级设置padding 三、父级触发BFC 1.overflow：hidden; ...
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
（2）子元素选择器（子选择器 重要） 语法 元素1>元素2{样式声明} 元素1和元素2用>隔开 元素1和元素2是父子关系 只选择父元素最近一级的子元素 即必须是亲儿子 选择器1 选择器2可以是任意基础选择器 （3）...
css控制子元素的宽度，来控制父级元素的宽度根据子元素的宽度来定，给出css代码
最新发布
06-27
</think>### CSS 控制父元素宽度根据子元素宽度自动调整 要实现父元素宽度根据子元素宽度自动调整，主要有以下几种 CSS 解决方案： #### 1. **使用 `display: inline-block`**（推荐） ```css .parent { display:...
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
小琳爱分享的博客
07-23 978
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
CSS3 元素居中
苦涩
05-28 280
元素水平居中 text-align: center;：设置行内元素、行内块级元素水平居中 margin: 0 auto;：设置块级元素水平居中 行高垂直居中法 适用于单行，有父元素有固定高度 line-height: 300px;：设置行内元素和行内块级元素垂直居中 内、外边距居中法 适用于父元素有固定高度 方法一：内边距法（设置给父元素） 水平居中：设置左内边距=（父元素宽度-自元素宽度）/ 2 垂直居中：设置上内边距=（父元素高度-自元素高度）/ 2 方法二：外边距法（设置给子元素；.
Css之子元素位于父元素底部居中
weixin_45346457的博客
11-24 1117
.product-subContainer { position: relative; .button-blue { position: absolute; bottom: 0.1rem; left: 0; right: 0; margin: 0 auto; } } } 父相对子绝对
html中父子元素的解释,CSS选择器 ，父元素、子元素、父/子及相邻这几个概念...
weixin_29800917的博客
06-08 2610
结构：推荐内容！内容关系解释：h4 和 p 同为 div 的“子元素”，两者分别同 div形成“父/子”关系。h4,p,strong 都是 div 的“子元素”。(三者都包含在 div之内)div 是 h4 和 p 的“父元素”。strong 和 p 形成“父/子”关系，strong 的“父元素”是 p。但 strong 和 div 并非“父/子”关系，而是“祖孙”关系，但 strong依然是 d...
利用css实现元素的上下左右居中
qq_32429257的博客
03-06 1484
前言：关于text-align:center和文字通过height与line-height实现的方式就不再赘述 1.未知元素宽高 方法一： 代码实例： html==&gt; &lt;div class="table"&gt; &lt;div class="father"&gt; &lt;div class="son"&gt; 子元素居中子元素居中子元...
CSS让子元素快速水平垂直居中的几种方法
qq_43855065的博客
07-02 469
方法有很多这里列出几种常用的 CSS代码如下 父元素类名以out打头，子元素类名以in打头 one,two…代表不同的方法 <style> *{ padding: 0; margin: 0; } [class*=out]{ width: 200px; height: 200px; background-color: pink; margin: 20px; ...
css居中问题
热门推荐
yanzi920324的博客
08-27 1万+
居中布局 一、水平居中（子元素） 【1】.常规元素设置水平居中： 《1》行内元素、不定宽块级元素：设置父元素 text-align:center 《2》图片水平居中：设置img  clear+display+margin 《3》定宽块级元素：设置子元素： margin:0 auto; 《4》通用方法（不管行/块级元素）：  设置父元素 display:flex; just...
【CSS】css获取子元素的父元素，即通过子元素选择父元素（使用CSS伪类 :has() :not() ）
m0_61049675的博客
01-31 4929
【代码】【CSS】css获取子元素的父元素，即通过子元素选择父元素（使用CSS伪类 :has() :not() ）
html中父子元素的解释,CSS 子绝父相 理解
weixin_33205138的博客
06-08 3987
首先你必须知道的是：top、right、bottom、left这四个属性要生效的话,必须得设置相对定位/绝对定位，即position：relative;或者position：absolute;，也就是说top、right、bottom、left是为相对定位/绝对定位而生的。子绝父相就是：子元素为绝对定位(position：absolute;)，父元素为相对定位position：relative;。...
display: flex;实现父子元素相对浮动
03-23
为了使子元素能够按照预期排列，父容器需要被定义为一个 Flex 容器。这可以通过以下代码实现： ```css .box { display: flex; flex-direction: row; /* 默认值 */ align-items: center; /* 垂直居中对齐 */ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值