面试官常问——子元素在父元素中居中的方法前言这是子元素在父元素居中的效果图 body部分代码那么有哪几种方法呢？下面

前言

这是子元素在父元素居中的效果图

QQ图片20220406190621.png

body部分代码

<body>
<div class='wrap' style="width:200px; height:200px; border:1px solid black ">
    <div class='child' style="width:100px; height:100px; border:1px solid red">
    Hello
    <div>
</div>

那么有哪几种方法呢？下面我将一一列出

方法

1.用弹性布局 display： flex

.wrap{
    dispaly: flex; 
    align-items: center; 
    justify-content: center;
    }

2.用网格布局 display: grid

.wrap{
    dispaly: grid; 
    align-items: center; 
    justify-content: center;
    }

3. 用绝对定位 position: absolute

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

4. 用绝对定位 position：absolute

.child{
    position: absolute
    top：50%
    left：50%
    transform:translate(-50%,-50%)
}

5. 根据宽高，调整距离（适用于宽高已知）

.child{
       margin-top:49px
       margin-left:49px
}

6. display: table-cell, vertical-align: middle;

.wrap{
display: table-cell
vertical-align: middle;
}
.child{
    margin: auto
}

结语

以上就是可以让子元素在父元素居中的方法，如有不对之处，望大家指出，非常感谢！