以下为ChatGPT自动生成的解答,正确与否请自行判断。

BFE.devAI解答 - CSS 问题
1. 垂直居中

一种常用的方法是使用 flex 布局,将 outer 设置为 display: flex; 并使用 align-items: center; 和 justify-content: center; 来垂直居中。

另一种方法是使用绝对定位,将 outer 设置为相对定位,inner 设置为绝对定位,并使用 top: 50%; 和 transform: translateY(-50%); 来垂直居中。完整的代码如下:

.outer { width: 100%; height: 100%; background-color: #efefef; position: relative; }

.inner { width: 100px; height: 100px; background-color: #f44336; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }