当父元素和子元素宽高都不固定时，该如何实现水平垂直居中呢？

方法一 ：使用css3的transform来实现

<div class="parent">
    <div class="child">
      <p></p>
    </div>
</div>

       .parent {
            width: 100%;
            height: 100%;
            background-color: antiquewhite;
        }
        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .child p {
     		width: 300px;
      		height: 400px;
      		background-color: rgb(78, 151, 211);
    	}

方法二：flex 布局

<div class="parent">
    <div class="child"></div>
</div>

.parent{
        display: flex;
        justify-content: center; /*水平居中*/
        align-items: center;	/*垂直居中*/
        width: 100%;
        height:100%;
        background-color: antiquewhite;
    }
    .parent .child{
        width: 200px;
        height: 300px;
        background-color: rgb(78, 151, 211);
    }