html:

<div class="box">
    <div class="center">
         需要水平垂直居中的元素
     </div>
 </div>

css:

1.flex 布局

<style>
        .box{
            width:200px;
            height: 300px;
            background-color:palegoldenrod;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .center{
            background-color: orange;
        }
    </style>

2.定位加transform

<style>
        .box{
            width:200px;
            height: 300px;
            background-color:palegoldenrod;
            position: relative;
        }
        .center{
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            right: 0;
            bottom:0;
            transform:translate(-50%,-50%)
        }
    </style>

3.纯定位实现

<style>
        .box{
            width:200px;
            height: 300px;
            background-color:palegoldenrod;
            position: relative;
        }
        .center{
            background-color: orange;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom:0;
            margin:auto auto;
        }
</style>

4.父元素设置table,子元素利用table-cell,text-align

<style>
        .box{
            width:200px;
            height: 300px;
            background-color:palegoldenrod;
            display: table;
            //为了区分出父元素
            padding:10px;
        }
        .center{
            background-color: orange;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>

总结：

以上4种解法各自代表了css的布局、定位、display可设置的属性

子元素均不知高、宽

在定位上面还可以做不同的定位来实现