He querido hacer un botón que quede alineado horizontalmente debajo del texto que dice "Burbujas". Ya probé flex y en el fragmento lo intento con transform pero independientemente de lo que intente, no obtendré el resultado deseado. ¡Así que por favor ayuda!
section { width: 100%; height: 100vh; overflow: hidden; background: #1F69FA; display: flex; justify-content: center; align-items: center; } section container { height: 200px; position: relative; border: 3px solid green; } section center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } <section> <div class="container"> <div class="container"> <button type="button" onclick="next()"> Next </button> </div> </div> </section>Ya que tiene la clase de contenedor pero en realidad no la está usando, podemos convertirla en una columna flexible y colocar ambos elementos dentro de ella.
function Seifenblasen_blasen() { const section = document.querySelector('section') const createElement = document.createElement('spawn') var size = Math.random() * 60; createElement.style.width = 30 + size + 'px'; createElement.style.height = 30 + size + 'px'; createElement.style.left = Math.random() * innerWidth + "px"; section.appendChild(createElement); setTimeout(() => { createElement.remove() }, 8000) } const Blaseninterval = setInterval(Seifenblasen_blasen, 100) { margin: 0; padding: 0; } .container { display: flex; flex-direction: column; justify-content: center; align-items: center; } section { width: 100%; height: 100vh; overflow: hidden; background: #1F69FA; display: flex; justify-content: center; align-items: center; } section h2 { font-size: 10em; color: #333; margin: 0 auto; text-align: center; font-family: consolas; } section spawn { position: absolute; bottom: -80px; background: transparent; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5); animation: animate 4s linear infinite; } section spawn:before { content: ''; position: absolute; width: 100%; height: 100%; transform: scale(0.25) translate(-70%, -70%); background: radial-gradient(#fff, transparent); opacity: 0.6; border-radius: 50%; } @keyframes animate { 0% { transform: translateY(0%); opacity: 1; } 99% { opacity: 1; } 100% { transform: translateY(-2000%); opacity: 0; } section span { margin-top: 700px; font-size: 1em; color: #333; margin: 0 auto; font-family: consolas; background-color: #1F69FA; border: none; position: absolute; } section container { height: 200px; position: relative; border: 3px solid green; } section center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } <section> <div class="container"> <h2> Bubbles </h2> <button type="button" onclick="next()"> Next </button> </div> </section>