Html 用flexbox垂直定心

我目前在包装器的垂直中心有问题。我试图创建一个div来显示flex，并按照另一篇文章的建议将项目对齐到中心，但没有成功。有什么办法解决这个问题吗

正文{
字体系列：Arial，无衬线；
背景：ddd；
}
h1{
文本对齐：居中；
字体系列：“Trebuchet MS”，Tahoma，Arial，无衬线；
颜色：#333；
文本阴影：0 1px 0#fff；
利润率：50px0；
}
#居中{
显示器：flex；
对齐项目：居中；
}
#包装纸{
宽度：100px；
保证金：0自动；
背景：#fff；
填充：20px；
边框：10px实心#aaa；
边界半径：15px；
背景剪辑：填充框；
文本对齐：居中；
}
.按钮{
字体系列：Helvetica、Arial、无衬线字体；
字体大小：13px；
填充物：5px10px；
边框：1px实心#aaa；
背景色：#eee；
背景图像：线性梯度（顶部，#fff，#F0）；
边界半径：2px；
盒影：0 1px 3px rgba（0,0,0,0.15）；
颜色：#666；
文字装饰：无；
文本阴影：0 1px 0#fff；
光标：指针；
过渡：所有0.2秒缓解；
}
.按钮：悬停{
边框颜色：#999；
盒影：0 1px 3px rgba（0,0,0,0.25）；
}
.按钮：激活{
盒影：0 1px 3px rgba（0,0,0,0.25）插页；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景：rgba（0,0,0,0.5）；
过渡：不透明度200ms；
可见性：隐藏；
不透明度：0；
}
.光{
背景：rgba（255,255,255,0.5）；
}
.覆盖。取消{
位置：绝对位置；
宽度：100%；
身高：100%；
游标：默认值；
}
.覆盖：目标{
能见度：可见；
不透明度：1；
}
.弹出窗口{
利润率：75px自动；
填充：20px；
背景：#fff；
边框：1px实心#666；
宽度：300px；
盒影：0.50pxRGBA（0,0,0,0.5）；
位置：相对位置；
}
.灯光.弹出窗口{
边框颜色：#aaa；
盒影：0 2px 10px rgba（0,0,0,0.25）；
}
.弹出窗口h2{
边际上限：0；
颜色：#666；
字体系列：“Trebuchet MS”，Tahoma，Arial，无衬线；
}
.弹出.关闭{
位置：绝对位置；
宽度：20px；
高度：20px；
顶部：20px；
右：20px；
不透明度：0.8；
过渡：所有200ms；
字体大小：24px；
字体大小：粗体；
文字装饰：无；
颜色：#666；
}
.弹出.关闭：悬停{
不透明度：1；
}
.popup.content{
最大高度：400px；
溢出：自动；
}
.p{
边缘：0.01米；
}
.p：最后一个孩子{
保证金：0；
}
iframe{
边界：无；
}

下降日
你好

您的主包装（div#center）必须定义其高度：

正文{
字体系列：Arial，无衬线；
背景：ddd；
}
h1{
文本对齐：居中；
字体系列：“Trebuchet MS”，Tahoma，Arial，无衬线；
颜色：#333；
文本阴影：0 1px 0#fff；
利润率：50px0；
}
#居中{
显示器：flex；
对齐项目：居中；
/*或者你想要的任何其他高度*/
高度：100vh；
}
#包装纸{
宽度：100px；
保证金：0自动；
背景：#fff；
填充：20px；
边框：10px实心#aaa；
边界半径：15px；
背景剪辑：填充框；
文本对齐：居中；
}
.按钮{
字体系列：Helvetica、Arial、无衬线字体；
字体大小：13px；
填充物：5px10px；
边框：1px实心#aaa；
背景色：#eee；
背景图像：线性梯度（顶部，#fff，#F0）；
边界半径：2px；
盒影：0 1px 3px rgba（0,0,0,0.15）；
颜色：#666；
文字装饰：无；
文本阴影：0 1px 0#fff；
光标：指针；
过渡：所有0.2秒缓解；
}
.按钮：悬停{
边框颜色：#999；
盒影：0 1px 3px rgba（0,0,0,0.25）；
}
.按钮：激活{
盒影：0 1px 3px rgba（0,0,0,0.25）插页；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景：rgba（0,0,0,0.5）；
过渡：不透明度200ms；
可见性：隐藏；
不透明度：0；
}
.光{
背景：rgba（255,255,255,0.5）；
}
.覆盖。取消{
位置：绝对位置；
宽度：100%；
身高：100%；
游标：默认值；
}
.覆盖：目标{
能见度：可见；
不透明度：1；
}
.弹出窗口{
利润率：75px自动；
填充：20px；
背景：#fff；
边框：1px实心#666；
宽度：300px；
盒影：0.50pxRGBA（0,0,0,0.5）；
位置：相对位置；
}
.灯光.弹出窗口{
边框颜色：#aaa；
盒影：0 2px 10px rgba（0,0,0,0.25）；
}
.弹出窗口h2{
边际上限：0；
颜色：#666；
字体系列：“Trebuchet MS”，Tahoma，Arial，无衬线；
}
.弹出.关闭{
位置：绝对位置；
宽度：20px；
高度：20px；
顶部：20px；
右：20px；
不透明度：0.8；
过渡：所有200ms；
字体大小：24px；
字体大小：粗体；
文字装饰：无；
颜色：#666；
}
.弹出.关闭：悬停{
不透明度：1；
}
.popup.content{
最大高度：400px；
溢出：自动；
}
.p{
边缘：0.01米；