相对于父级的子元素的水平垂直居中显示：

lemon.ZZ

已于 2022-07-18 12:46:16 修改

阅读量284

点赞数 1

于 2022-07-18 09:57:27 首次发布

本文链接：https://blog.csdn.net/qq_53277007/article/details/125841489

版权

通过获取元素方法先给各个父子div设计基本样式:

    let fas = document.body.children;

    for (let i = 0; i < fas.length - 1; i++) {
        // console.log(fas[i]);
        let sty = 'width:200px; height:200px; background-color:rgb(148,201,219);margin:10px auto;position: relative;'
        fas[i].style = sty;

        let styson = 'width:50px; height:50px; background-color:rgb(255,99,100); text-align: center; line-height: 50px;'
        fas[i].children[0].style = styson;
    }

总体结构：
<body>

    <div class="fa1">
        <div class="son1">son1</div>
    </div>

    <div class="fa2">
        <div class="son2">son2</div>
    </div>

    <div class="fa3">
        <div class="son3">son3</div>
    </div>

    <div class="fa4">
        <div class="son4">son4</div>
    </div>

    <div class="fa5">
        <div class="son5">son5</div>
    </div>

    <div class="fa6">
        <div class="son6">son6</div>
    </div>

    <div class="fa7">
        <div class="son7">son7</div>
    </div>

    <div class="fa8">
        <div class="son8">son8</div>
    </div>

</body>

方法1:

将top,bottom,left,right设置为0，子元素因自身的宽度和高度不足,会在父元素上的初始位置显示，然后设置margin为auto，会分别将子元素在父元素中的边距设置为水平垂直居中的距离。

    .son1 {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

方法2:transfrom方法

    .son2 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-25px, -25px);
    }

方法3：外边距方法1：

设定水平与垂直偏移父元素的50%，然后利用外边距来移动子元素的位置，margin-top和margin-left的值分别为子元素自身高度和宽度的一半的负值

    .son3 {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -25px;
        margin-top: -25px;
    }

方法4：flex布局方法：

将父级盒子设置为弹性盒子，子级盒子就会脱离文档流，利用justify-content和align-items设置为center就可以水平垂直居中

    .fa4{
        display:flex;
        justify-content:center;
        align-items: center;
    }

方法5：定位

计算子元素和父元素的距离, 通过高度和宽度可知子元素需要向下和向右移动((200-50)/2)px;

    .son5{
        position: absolute;
        left:75px; 
        /* left:75/200 ->转化为百分数也可 */
        top: 75px;
        /* top: 75/200 ->转化为百分数也可 */
    }

方法6：外边距方法2：

    .son6{
        margin-top: 75px;
        margin-left: 75px;
    }

方法7:将父元素转化为table-cell类型

将父元素fa7转化为table-cell类型，并设置vertical-align为居中状态，可以实现水平居中的效果。当子元素为div等块级元素，需转化为inline-block类型，设置text-align为水平居中，line-height设置为父级高度（实现垂直居中）就可以达到水平垂直居中

    .fa7{
        display: table-cell;
        vertical-align: middle;
        text-align: center; 
        line-height: 200px;
    }
    .son7{
        display: inline-block;
    }

方法8：clac()函数使用

    .son8{
        position: absolute;
        top: calc(50% - 25px);
        left: calc(50% - 25px);
    }

效果如下图所示：

lemon.ZZ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫