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

实现目标

divOuter包裹divInner，实现divInner的垂直水平居中

代码实现：

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%);}

效果图

特点

内容高度可变，代码量小，会和其他transform样式有冲突，某些情况下的边缘和字体渲染会有问题

支持