如何实现嵌套的内部div垂直水平居中

实现目标

代码实现：

HTML代码

<div id="divOuter">
<div id="divInner"></div>
</div>

CSS代码

#divOuter{
margin: auto;
width:60px;
height:60px;
background: #ff1c1c;
overflow: hidden;
}
#divInner{
width:20px;
height:20px;
background: #0000ff;

position: relative;
top: 50%;
transform: translateY(-50%,-50%);
}

效果图

特点

支持