如何让两个按钮在页面中水平垂直居中且并排显示？
2026-5-28
解决按钮水平垂直居中并并排的问题
我太懂你折腾好几个小时的崩溃感了！咱们直接来搞定这个问题，核心用Flexbox就能轻松实现你要的效果，这是目前最简洁可靠的方案。
问题根源分析
你当前的代码有两个核心问题：
- 两个按钮分别放在独立的
<h1>标签里，<h1>是块级元素，默认会独占一行，自然没法并排 - 给按钮加了
position: absolute，让按钮脱离了文档流，很难同时控制多个元素的位置和排列
修改后的完整代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; background-color:grey; /* 让body成为Flex容器，确保内部内容能占满视口高度并居中 */ display: flex; min-height: 100vh; justify-content: center; align-items: center; flex-direction: column; /* 让标题和按钮组垂直排列 */ } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; /* 改成100%覆盖整个视口，视觉更协调 */ background-image: url("star-sky.jpg"); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: -2; } .count-particles{ position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles { border-radius: 0 0 3px 3px; } h1 { color:white; text-align: center; margin-bottom: 25px; /* 给标题和按钮组加一点间距 */ } /* 按钮组容器：负责让按钮并排且有间距 */ .button-group { display: flex; gap: 18px; /* 按钮之间的间距，可根据需求调整 */ } button { border-color:white; border-width: 2px; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); /* 移除之前的绝对定位样式，交给Flex容器控制位置 */ } </style> </head> <body> <!-- 用容器包裹标题和按钮组，保持结构清晰 --> <div class="content-container"> <h1>我的页面标题</h1> <div class="button-group"> <button><a href="test.com" class="btn gitbtn">GitHub</a></button> <button><a href="test.com" class="btn fillbtn">Test</a></button> </div> </div> <div class="particlesdiv2" id="particles-js"></div> <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);; </script> </body> </html>
关键修改点说明
给
<body>添加Flex布局：display: flex：将body转换为Flex容器min-height: 100vh：让body至少占满整个视口高度justify-content: center+align-items: center：实现内部内容的水平+垂直居中flex-direction: column：让标题和按钮组保持垂直排列
新增按钮组容器：
.button-group用display: flex让内部按钮并排gap: 18px：控制按钮之间的间距，比用margin更直观易维护
清理按钮的定位样式：
- 移除按钮上的
position: absolute、top、transform等属性，让按钮回到文档流，由Flex容器统一控制位置
- 移除按钮上的
优化粒子背景：
- 把
#particles-js的height改为100%，让背景覆盖整个视口，视觉更统一
- 把
这样修改后，你的按钮就能完美实现水平+垂直居中，同时并排显示了，而且响应式也能正常工作~
内容的提问来源于stack exchange，提问作者Tommy
