如何用HTML+CSS实现三个并排按钮的水平垂直居中

• 你写的flex居中逻辑本身完全正确，之所以没出效果，问题出在height: 100%的计算规则上：给元素设置百分比高度时，要求所有上层父元素（也就是<html>、<body>）必须有明确的可计算高度，否则这个百分比高度会直接失效，容器只会被内部按钮撑得和内容一样高，自然没法在垂直方向居中。
• 另外浏览器默认给<body>自带8px的外边距，就算高度能撑起来，整体按钮组也会出现无意义的左上偏移。

不用推翻现有的样式结构，只需要在原来的<style>块里补一段全局样式打通高度链路就能跑通：

html,
body {
  height: 100%;
  margin: 0;
}

• 给<html>和<body>设置height: 100%，是让最外层的根元素直接占满整个浏览器视口的高度，这样你给.wrapper设置的height:100%才能真正拿到全页面的可用高度，之前写的justify-content: center（水平居中）、align-items: center（垂直居中）就会自动生效，三个并排的图片按钮会稳稳落在页面正中间。
• 顺手清掉body默认的8px外边距，避免居中位置出现莫名的偏移。

如果嫌写两层父元素的高度麻烦，直接把.wrapper原来的height: 100%改成height: 100vh就行——这个单位是直接占满整个视口高度，不需要依赖父元素的高度继承，效果和上面的写法完全一致。
另外可以顺手优化下按钮间距：去掉中间那个按钮的行内style="padding: 1%"，给.wrapper加一行gap: 16px（数值可以按设计要求调整），三个按钮之间会自动生成均匀的间距，比逐个给按钮加内边距好维护很多。

内容的提问来源于stack exchange，提问作者Lutetia87