Html 如何水平和垂直对齐放置3个按钮

我希望这3个按钮垂直和水平对齐，但当我试图对齐它们时，最后一个按钮掉了下来，我不知道为什么。这是没有对齐的原始代码，有人能帮我吗

@import'https://fonts.googleapis.com/css?family=Comfortaa:300，400700&子集=西里尔文，西里尔文分词，拉丁文分词'；
身体{
背景：url(https://wallpaperscraft.com/image/black_background_pattern_light_texture_55291_1920x1080.jpg)无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
钮扣{
颜色：#4545；
宽度：200px；
背景：透明；
边框宽度：2倍；
边框样式：实心；
边框颜色：#4545；
位置：相对位置；
边缘：1米；
显示：内联块；
填充物：0.5em 1em；
过渡：所有0.3秒的缓进缓出；
文本对齐：居中；
字体系列：comfortaa；
字体大小：粗体
}
按钮：前，按钮：后{
内容：''；
显示：块；
位置：绝对位置；
边框颜色：#4545；
框大小：边框框；
边框样式：实心；
宽度：1米；高度：1米；
过渡：所有0.3秒都易于输入输出
}
按钮：之前{
顶部：-6px；左侧：-6px；
边框宽度：2px 0 0 2px；
z指数：5；
}
按钮：之后{
底部：-6px；
右图：-6px；
边框宽度：0 2px 2px 0；
}
按钮：悬停：之前，按钮：悬停：之后{
宽度：计算（100%+12px）；
高度：计算（100%+12px）；
边框颜色：#fff
}
按钮：悬停{
颜色：#3535；
背景色：#fff；
边框颜色：#fff
}
潘内洛先生{
最大宽度：960像素；
文本对齐：居中；
位置：相对位置；
保证金：自动；
}
.罗索按钮{
颜色：#FF0C；
边框颜色：#ff0c
}
.rosso按钮：之前，.rosso按钮：之后{
边框颜色：#ff0c
}
.rosso按钮：悬停：之前，.rosso按钮：悬停：之后{
边框颜色：#ff0c；
}
.罗索按钮：悬停{
颜色：#fff；
背景色：#FF0C；
边框颜色：#ff0c；
}
罗索，潘内洛{
最大宽度：960像素；
文本对齐：居中；
位置：相对位置；
保证金：自动；
}
.比安科按钮{
颜色：#e8e8e8；
边框颜色：#e8e8e8
}
.bianco按钮：之前，.bianco按钮：之后{
边框颜色：#e8e8e8
}
.bianco按钮：悬停：之前.bianco按钮：悬停：之后{
边框颜色：#e8e8e8；
}
.bianco按钮：悬停{
颜色：#000；
背景色：#e8e8e8；
边框颜色：#e8e8e8；
}
比安科·潘内洛先生{
最大宽度：960像素；
文本对齐：居中；
位置：相对位置；
保证金：自动；
}
.verde按钮{
颜色：#e8e8e8；
边框颜色：#e8e8e8
}
.verde按钮：之前，.bianco按钮：之后{
边框颜色：#e8e8e8
}
.verde按钮：悬停：之前，.bianco按钮：悬停：之后{
边框颜色：#e8e8e8；
}
.verde按钮：悬停{
颜色：#000；
背景色：#e8e8e8；
边框颜色：#e8e8e8；
}
维德·潘内洛先生{
最大宽度：960像素；
文本对齐：居中；
位置：相对位置；
保证金：自动；
}

TS3
论坛
买手

使用

flex

在具有

justify content:center的父对象上使用
flex；对齐项目：居中；最小高度：100vh使元素至少与浏览器高度水平和垂直对齐。然后从
.pannello


@import'https://fonts.googleapis.com/css?family=Comfortaa:300，400700&子集=西里尔文，西里尔文分词，拉丁文分词'；
身体{
背景：url(https://wallpaperscraft.com/image/black_background_pattern_light_texture_55291_1920x1080.jpg)无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
钮扣{
颜色：#4545；
宽度：200px；
背景：透明；
边框宽度：2倍；
边框样式：实心；
边框颜色：#4545；
位置：相对位置；
边缘：1米；
显示：内联块；
填充物：0.5em 1em；
过渡：所有0.3秒的缓进缓出；
文本对齐：居中；
字体系列：comfortaa；
字体大小：粗体
}
按钮：前，按钮：后{
内容：''；
显示：块；
位置：绝对位置；
边框颜色：#4545；
框大小：边框框；
边框样式：实心；
宽度：1米；高度：1米；
过渡：所有0.3秒都易于输入输出
}
按钮：之前{
顶部：-6px；左侧：-6px；
边框宽度：2px 0 0 2px；
z指数：5；
}
按钮：之后{
底部：-6px；
右图：-6px；
边框宽度：0 2px 2px 0；
}
按钮：悬停：之前，按钮：悬停：之后{
宽度：计算（100%+12px）；
高度：计算（100%+12px）；
边框颜色：#fff
}
按钮：悬停{
颜色：#3535；
背景色：#fff；
边框颜色：#fff
}
潘内洛先生{
最大宽度：960像素；
文本对齐：居中；
位置：相对位置；
}
.罗索按钮{
颜色：#FF0C；
边框颜色：#ff0c
}
.rosso按钮：之前，.rosso按钮：之后{
边框颜色：#ff0c
}
.rosso按钮：悬停：之前，.rosso按钮：悬停：之后{
边框颜色：#ff0c；
}
.罗索按钮：悬停{
颜色：#fff；
背景色：#FF0C；
边框颜色：#ff0c；
}
罗索，潘内洛{
最大宽度：960像素；
文本对齐：居中；
位置：相对位置；
保证金：自动；
}
.比安科按钮{
颜色：#e8e8e8；
边框颜色：#e8e8e8
}
.bianco按钮：之前，.bianco按钮：之后{
边框颜色：#e8e8e8
}
.bianco按钮：悬停：之前.bianco按钮：悬停：之后{
边框颜色：#e8e8e8；
}
.bianco按钮：悬停{
颜色：#000；
背景色：#e8e8e8；
边框颜色：#e8e8e8；
}
比安科·潘内洛先生{
最大宽度：960像素；
文本对齐：居中；
位置：相对位置；
保证金：自动；
}
.verde按钮{
颜色：#e8e8e8；
边框颜色：#e8e8e8
}
.verde按钮：之前，.bianco按钮：之后{
边框颜色：#e8e8e8
}
.verde按钮：悬停：之前，.bianco按钮：悬停：之后{
边框颜色：#e8e8e8；
}
.verde按钮：悬停{
颜色：#000；
背景色：#e8e8e8；
边框颜色：#e8e8e8；
}
维德·潘内洛先生{
最大宽度：960像素；
文本对齐：居中；
位置：相对位置；
保证金：自动；
}

TS3
论坛
买手
我故意稍微更改了标记和CSS，使其更简单，然后更改了

.pannello {
  text-align:center;
  position:relative;
  white-space: nowrap;                 /*  make buttons stay on 1 line  */
  left: 50%;                           /*  position its left edge in the middle  */
  top: 50vh;                           /*  position its top edge in the middle */
  transform: translate(-50%,-50%);     /*  move left/top back half its own width/height  */
}