如何實現嵌套的內部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樣式有衝突，某些情況下的邊緣和字體渲染會有問題

支持