div内容居中

请问老师，如何让黄色div在红色div中居中显示

源码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .wrap{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: red;
           text-align: center;
           border-radius: 30px;
           transform: rotate(0deg);
        }
        .wrap:hover{
        transform: rotate(360deg);
        transition: transform ease 1s;
        }
        .inner{
            width: 100px;
            height: 100px;
            background: yellow;
           
        }
 
    </style>
</head>
<body>
   
   <div class="wrap">
       <div class="inner">
           
       </div>
   </div>
</body>
</html>

小巧的蜗牛 2018-05-15

源自：CSS3边框与圆角 1-11 边界图片

收起

3回答

风蔚然回答被采纳获得+3积分 2018-05-15 13:17:48

.wrap{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: red;
    text-align: center;
    border-radius: 30px;
    transform: rotate(0deg);
}
.inner{
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: yellow;

}

收起回答

小巧的蜗牛提问者 #1

非常感谢！

2018-05-16 07:09:37

风蔚然 2018-05-15 13:22:07

.wrap{
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
margin: 0 auto;
background: red;
text-align: center;
border-radius: 30px;
transform: rotate(0deg);
}