一个子盒在父盒中实现水平垂直居中的方法！

最新推荐文章于 2023-09-11 08:21:22 发布
最新推荐文章于 2023-09-11 08:21:22 发布
阅读量1.2k 收藏
点赞数
分类专栏： H5+CSS3 文章标签： html css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IO14122/article/details/109155656
版权

让盒子在父盒中是很经典的问题，自己整理了以下这些方法参考：

1.利用子绝父相+margin实现。

  • 给子元素相对定位，父元素绝对定位
  • 给子元素设置left：50%；top：50%；
  • 利用margin-left：-自身宽度的一半，-自身高度的一半；
<style>
        .fa {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: rgb(122, 247, 236);
            border: 1px solid black;
            margin: 50px auto 0;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            width: 200px;
            height: 200px;
        }
 </style>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>

2.子绝父相+margin:auto；

  • 设置子元素绝对定位，父元素相对定位
  • 子元素设置top: 0;left: 0;right: 0;bottom: 0;
  • 在给子元素设置margin: auto;实现水平垂直居中
<style>
        .fa {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: rgb(122, 247, 236);
            border: 1px solid black;
            margin: 50px auto 0;
        }
        .son {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: rgb(235, 238, 73);
        }
</style>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>

3.利用transform属性实现

注意：transform是css3添加的属性，IE10及以上和标准浏览器最新版本才可以使用，IE9使用兼容写法也可以使用。

  • 给子元素相对定位，父元素绝对定位
  • 给子元素设置left：50%；top：50%；
  • 在给子元素设置transform: translate(-50%,-50%);
<style>
        .fa {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: rgb(122, 247, 236);
            border: 1px solid black;
            margin: 50px auto 0;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: rgb(235, 238, 73);
        }
</style>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>

4.利用弹性盒模型实现

注意：弹性盒模型在IE11及以上和标准浏览器才可以使用（设置写移动端）

  • 给父盒设置弹性盒模型
  • 设置justify-content: center;实现子盒水平居中
  • 设置align-itmes: center;实现子盒垂直居中
<style>
        .fa {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 500px;
            height: 500px;
            background-color: rgb(122, 247, 236);
            border: 1px solid black;
            margin: 50px auto 0;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: rgb(235, 238, 73);
        }
</style>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>

5.利用margin与transform方法

  • 给子元素设置margin: 50% auto 0;*【注意：这个地方会出现父子上外边距合并问题，给父元素设置overflow: hidden;或者设置边框都可以解决】
  • 给子元素设置transform: translateY(-50%);
<style>
        .fa {
            width: 500px;
            height: 500px;
            background-color: rgb(122, 247, 236);
            border: 1px solid black;
            margin: 50px auto 0;
            /* overflow: hidden; */
        }
        .son {
            width: 200px;
            height: 200px;
            margin: 50% auto 0;
            transform: translateY(-50%);
            background-color: rgb(235, 238, 73);
        }
</style>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>

6.transform实现视觉上水平垂直居中；

  • 给子元素设置transform: translate(（父盒宽度-子盒宽度）/2, （父盒高度-子盒高度）/2);
  • 这种方法只适合父盒子盒宽度好算的情况下，实现视觉上的居中。
<style>
        .fa {
            width: 500px;
            height: 500px;
            background-color: rgb(122, 247, 236);
            border: 1px solid black;
            margin: 50px auto 0;
        }
        .son {
            width: 200px;
            height: 200px;
            transform: translate(150px,150px);
            background-color: rgb(235, 238, 73);
        }
</style>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>

*[以上方法由自己总结，欢迎各位大佬补充和指正，谢谢]

懒羊羊我小弟
关注
专栏目录
一个盒子如何在另一个盒子中居中
qq_46053824的博客
06-30 3354
写页面会碰到不少的居中问题，而有些情况下不能用margin:0 auto来实现水平方向的居中。 如下： <style> #outer{ background-color: #00a1ff; width:100px; height:100px; margin:200px auto; text-align:center; position:relative; } #inner{
让一个子盒子在父盒子中水平垂直居中的方法
yigexiaobai_1的博客
07-28 1556
通过子绝父相left50%top50%让子盒子定到接近父盒子中心的位置,再通过上外边距和左外边距负的子盒子自身宽高一半的距离就可以让子盒子在父盒子中水平垂直居中(这里要注意,定位用了left和top后外边距只能使用left和top用right和bottom无效)让父盒子变成flex弹性盒子,再给父盒子加样式justify-contentcenter;(垂直居中),就可以实现子盒子水平垂直居中。这种方法也是先子绝父相定位,再给子盒子上下左右全为0,再使用marginauto;...
如何使子盒子在父盒子里面水平垂直居中？
L13576679694的博客
03-09 2267
在css的应用中，让子盒子在父盒子里面水平垂直居中我们有三种方法： 首先我们需要先创建两个盒子，再给盒子添加css属性； 第一种： .box1 { /* 相对定位 */ position: relative; width: 600px; height: 600px; background-color: pink; } ....
一个盒子在另一个盒子里面垂直水平居中方法
qq_65746697的博客
02-28 1900
1.给小盒子里面加个span标签，给里面的盒子写display：inline-block转换成行内块元素，用vertical-align：middle设置垂直向中间对齐；给父元素设置行高=盒子高度，然后加上text-align：center； .box { width: 300px; height: 200px; background-color: aqua; line-height: 150px; ...
子盒子在父盒子中水平垂直居中的几种方法
qq_41893334的博客
05-14 3937
需求：子盒子在父盒子中水平垂直居中 效果图如下： 结构代码： <div class="father"> <div class="son"></div> </div> 第一种实现方式：定位 + 偏移 .father{ width: 300px; height: 300px; ...
子盒子在父盒子中水平垂直居中常用的四种方法
最新发布
qiaozhilian的博客
09-11 752
父盒子使用相对定位,子盒子使用。
CSS实现子元素在父元素中水平垂直居中的方法总结
weixin_42678796的博客
10-12 840
运行效果 HTML结构 <div class="container"> <div class="content"></div> </div> 实现方式 1. 绝对定位 + margin:auto 思路：绝对定位使子元素脱离文档流，再将各方向定位值设置为0，由margin自动分配剩余空间，从而实现元素的水平垂直居中 .container { width: 200px; height: 200px;
CSS水平垂直居中的几种方法总结
09-24
CSS水平垂直居中技术是指在网页布局过程中，对页面中的一个或多个元素进行位置安排，使其在容器中水平和垂直方向上都处于中心位置的技术。水平垂直居中是Web前端开发中非常常见和重要的布局技巧，它能提高页面的视觉...
CSS中常用定位，子元素在父元素中水平垂直居中的方案及伸缩盒
m0_59761769的博客
02-24 316
1.定位 1.静态定位，默认定位 2.固定定位 position：fixed 脱离文档流 原先位置不保留 相对于适口区域进行定位 如果没有使用定位属性 则在原先位置定位 3.相对定位 position：relative 不脱离文档流 原先位置保留 使用定位属性后 相对于原来位置进行定位 4.绝对定位 position：abosulte 脱离文档流 原先位置不保留...
让子元素在父元素内垂直水平居中的方法
qq_43465434的博客
02-03 938
让子元素在父元素内垂直水平居中的方法 首先，我们先创建一个父盒子和一个子盒子，然后让子盒子在父盒子内部水平垂直都居中 <body> <div class="container"> <div class="box"></div> </div> </body> 1.最方便的弹性盒子 通过设置父元素盒子一下三个属性，就可以快速方便地使子元素盒子水平垂直居中，并且不需要计算： display: flex; justify-co
盒子水平居中的方法
weixin_41218855的博客
04-18 685
1、使用margin:0 auto; 2、使用margin左右边距 3、先让盒子左移父盒子的一半，再用变形或者定位把子盒子右移子盒子的一半 4、把盒子换成行内块元素，然后用text-align属性使盒子水平居中 ...
[css] 写出固定子容器在固定的父容器下水平垂直居中的布局
歌谣的博客
01-16 322
[css] 写出固定子容器在固定的父容器下水平垂直居中的布 1.父容器 position: relative,子元素 position: absolute;left: 50%;top: 50%;transform:translate3d(-50%,-50%,0). 2.父容器 display:flex; align-items:center;just-content:center. 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端
子盒子在父盒子中水平垂直居中显示的几种方式
刘运召的博客
05-14 2227
绝对定位方式-子盒子必须有宽高 先通过设置子盒子的left、top为50%，让子盒子左上角处于中间位置，再通过设置子盒子的 margin-left、margin-top 把盒子移动到居中的位置 <style type="text/css"> *{ padding: 0; margin: 0; } .wrapper{ width: 800px; height: 800px; backgroun
css label 居中布局_[css] 第449天 写出固定子容器在固定的父容器下水平垂直居中的布局...
weixin_39918248的博客
12-31 72
/* 方法一 */.father {width: 300px;height: 300px;border: 1px solid black;display: flex;justify-content: center;align-items: center;}.son {width: 100px;height: 100px;background: cadetblue;}/* 方法二 */.father...
子容器在父容器中水平和垂直居中的解决办法
yfzna6l的专栏
07-31 484
.father{ width: 400px; height: 300px; margin: 0 auto; border: 10px solid #21296d; position: relative; } .son{ width: 200
子绝父相和定位水平居中
m0_62181310的博客
04-10 3998
子绝父相,子元素绝对定位,父元素相对定位,子元素位置偏移参考父元素的位置,相对定位不脱标,还占据原来的位置
怎么让子元素在父元素中水平垂直居中
chenlim87的博客
03-28 3019
第一种方法:使用绝对定位 此方法要求父元素要有高度,父元素开启相对定位,子元素开启绝对定位. 注意:如果父元素没有高度也没有开启相对定位,则子元素会相对于body水平垂直居中. 第二种方法:使用flex布局 在flex布局中父元素是子元素的容器,子元素是父元素的项目. 容器里设置的属性都是对于项目来说的, display:flex代表容器里的所有项目按flex布局, justify-conte...
子元素在父元素中水平和垂直居中的几种方法
usernameID007的博客
08-06 2426
通过将父容器的display属性设置为flex，并设置justify-content和align-items属性为center，可以使元素在父容器中水平和垂直居中。通过将元素的position属性设置为absolute，以及使用top、left、right和bottom属性，可以将元素相对于其父容器进行定位。将父容器的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align属性设置为middle，可以实现元素在父容器中垂直居中。
子绝父相后，父元素没有高度的解决方法
weixin_44365083的博客
12-23 536
父元素自适应子元素的高度，解决方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值