html+css实现子div在父div中居中

<div class="big">
    <div class="small">
    </div>
</div>

一、水平居中

1、子div宽固定

父div固定与否没影响

//方法1
.big {
    width: 200px;
    background: blue;
}

.small {
    height: 100px;
    width: 100px;
    background: red;
    margin: 0 auto;
}

//方法2 -- 会使子div与父div等高
.big {
    width: 200px;
    height: 200px;
    background: blue;
    display: flex;
    justify-content: center;
}
.small {
    width: 100px;
    background: red;
}

2、子div不固定

子div宽度不固定时，默认宽度与父元素一致。

二、垂直居中

1、父div高固定

子div高固定与否没影响

//方法1
.big {
    width: 200px;
    height: 200px;
    background: blue;
    display: table-cell;
    vertical-align: middle;
}

.small {
    width: 200px;
    background: red;
}

//方法2
.big {
    width: 200px;
    height: 200px;
    background: blue;
    display: flex;
    align-items: center;
}

.small {
    width: 200px;
    background: red;
}

//方法3  --子div高度需固定
.big {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative; 
}

.small {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 50%；
    margin-top: -50px;
}

2、父div高不固定

父div会被子div撑开，高度与子元素一样。

三、既垂直又水平居中

1、父子div宽高都固定

//方法1
.big {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative; 
}

.small {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

//方法2
.big {
    width: 200px;
    height: 200px;
    background: blue;
    display: table-cell;
    vertical-align: middle; 
}

.small {
    width: 100px;
    height: 100px;
    background: red;
    margin: 0 auto
}

//方法3
.big {
    width: 200px;
    height: 200px;
    background: blue;
    display: flex;
    justify-content: center;
    align-items: center;
}

.small {
    width: 100px;
    height: 100px;
    background: red;
}

//方法4
.big {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
}

.small {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;

    margin-left: -50px; margin-top: -50px;   //或者 transform: translate(-50%,-50%);

}

//方法5 -- 子div的宽高可以不固定
.big {
    width: 200px;
    height: 200px;
    background: blue;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.small {
    background: red;
    display: inline-block;
}

2、父div宽高固定，子div不固定

子div会自动继承父div的宽度，不存在水平居中，只需要垂直居中即可，与二、1。类似。

3、父div不固定，子div固定

父div的高度与子div高度一致，只存在水平居中问题，与一、1。类似。

4、父子div宽高都不固定

父子div的大小一致，不存在居中问题。