css实现不定高度的元素垂直居中问题

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .cc{
            display: table;
            width:300px;
            height:300px;
            margin:30px auto;
            text-align:center;
            background:#00c1de;
        }
        p{
            display:table-cell;
            background:green;
            vertical-align:middle;
        }
    </style>
</head>
<body>
<div class="cc">
    <p>1111</p>
</div>
</body>
</html>

给父元素设置display:table 子元素设置display:table-cell;vertical-align:middle

如果需要需要让不定高的图片垂直居中，则需要给父元素设置

display: flex;
justify-content: center;
align-items: center;