Div在Div中水平垂直居中的四种常用方法

div在div中水平垂直居中的常用方法

<div class="div1">
    <div class="div2"></div>
</div>

```

1.使用定位position

```

.div1{
        width: 200px;
        height: 200px;
        background-color: pink;
        position: relative;
    }
.div2{
        width: 50px;
        height: 50px;
        background-color: saddlebrown;
        position: absolute;
        /*水平居中*/
        margin: 0 auto;
        top: 0;
        left: 0;
        /*垂直居中*/
        bottom: 0;
        right: 0;
    }
```

2. 使用定位+2D转换（transform） （万能 设置图片、段落、span、div水平垂直居中均可用）

```

.div1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: relative;
    }
        
.div2 {
        width: 50px;
        height: 50px;
        background-color: saddlebrown;
        position: absolute;
        /*子盒子向下向右移动父盒子宽度/高度的50%*/
        top: 50%;
        left: 50%;
        /*再让自身向上向左移动自身宽度/高度的50%*/
        transform: translate(-50%,-50%);
    }
```

3.使用display:flex；布局

```

.div1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*flex布局*/
        display: flex;
        /*水平居中*/
        justify-content: center;
        /*垂直居中*/
        align-items: center;
    }
        
    .div2 {
        width: 50px;
        height: 50px;
        background-color: saddlebrown;
    }
```

4.使用display:table-cell；属性

```

.div1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        /*给父元素设置为单元格 display:table-cell;*/
        /*然后使用vertical-align:middle;属性实现垂直居中*/
        display: table-cell;
        vertical-align: middle;
    }
.div2 {
        width: 50px;
        height: 50px;
        background-color: skyblue;
        /*实现子元素水平居中*/
        /*margin: 0 auto;*/
    }
```