我在解决another issue时碰到了这个问题。我有以下基本布局：
+-----+-----------------+
| | |
| c |c +------+ |
| o |o | item | |
| l |l | | |
| | +------+ |
| 1 |2 |
+-----------------------+
col 1和col 2是通过CSS Grid创建的。现在，我正在努力将item（水平和垂直）居中放置在col 2内部。
#content {
display: grid;
grid-template-columns: minmax(13rem, 15%) minmax(85%, 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#circle {
background: #7FFF00;
width: 9%;
padding-top: 9%;
border-radius: 50%;
margin: auto;
}
.menu {
background: #D2691E;
grid-row-start: 1;
grid-row-end: 1;
}
.circle-area {
background: #191970;
grid-row-start: 1;
grid-row-end: 1;
grid-column-start: auto;
grid-column-end: span 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}<body>
<div id='content'>
<div class='menu'></div>
<div class='circle-area'>
<div id='circle'></div>
</div>
</div>
</body>Code above on JSFiddle当我在Chrome 62.0和Safari 11.0中进行测试时，我的代码可以正常工作（item保存其长宽比并垂直和水平居中）。虽然当我使用Firefox（56.0）时-在调整窗口大小时会更改宽高比。我尝试了另一个centering technique-使用grid (JSFiddle)（结果是相同的Firefox无法保留宽高比）。现在，commenting out (JSFiddle) css的flex部分将使Firefox保留长宽比，尽管该项目不再垂直居中。我的问题是：
item在col 2内部垂直和水平居中的正确解决方法/解决方法是什么？