如何让子元素在父元素的中间？

越来越好的月

已于 2023-03-09 16:09:18 修改

阅读量270

点赞数 1

分类专栏： css初学---遇到的问题文章标签： css Powered by 金山文档

于 2023-02-28 21:19:54 首次发布

本文链接：https://blog.csdn.net/yuyuyuyuyuyyuuyu/article/details/129270357

版权

css初学---遇到的问题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

方法一：用定位

 <style>
        .son1_green{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            left:0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        
        .fa1_red{
            background-color: red;
            height: 400px;
            width: 400px;
            position: relative;
        }
    </style>
    <div class="fa1_red">
        <div class="son1_green"></div>
    </div>

显示效果如下图所示

康哥说：只有绝对定位的元素才可以，意思就是绝对定位之后如果设置了 margin: auto,

那么 margin-top 和 margin-right 不再为0,而是 auto，

同时需要设置 top,bottom,left,right为0 来找到父元素的位置，

然后 margin: auto 会找到父元素的位置分配好上下左右外边距，从而实现水平垂直居中！

方法二：怪异盒子

<style>
        .son1_green{
            width: 200px;
            height: 200px;
            background-color: green;
          
        }
        
        .fa1_red{
            background-color: red;
            height: 400px;
            width: 400px;
            padding:100px;
            box-sizing: border-box;
        }
    </style>
    <div class="fa1_red">
        <div class="son1_green"></div>
    </div>

效果同上

原理就是用padding压缩父盒子的内容显示区，并设置怪异盒子使不会改变父盒子的宽高。

方法三：弹性布局

<style>
        .v1{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .v2{
            width: 200px;
            height: 200px;
            background-color: pink;

        }
    </style>
    <div class="v1">
        <div class="v2"></div>
    </div>

效果如下

原理开启浮动布局，并对浮动子元素进行，主轴侧轴方向的排列。

方法四：用浮动+margin

 <style>
        .v1{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
            
        }
        .v2{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* float: left; */
            float: left;
            margin-left: calc((500px - 200px)/2);
            margin-top: calc((500px - 200px)/2);
            
        }
    </style>
    <div class="v1">
        <div class="v2"></div>
    </div>

效果如下

利用浮动避免父元素与子元素一起移动

方法五：只用margin（padding）

<style>
        .v1{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
            
        }
        .v2{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            margin-left: calc((500px - 200px)/2);
            margin-top: calc((500px - 200px)/2);
            
        }
    </style>
    <div class="v1">
        <div class="v2"></div>
    </div>

用margin放到中间