div宽高不定 水平垂直居中

html

<div class="content">
        <div>我是内容</div>
    </div>

第一种

.content
    width: 300px;
    height: 300px;
    position: relative;
    border: 1px solid #ccc;
    div
        display:inline-block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background-color: red;

image.png

第二种

.content
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;

    div
        display:inline;
        background-color: red;

image.png

第三种

.content
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;

    div
        background-color: red;

image.png