Recientemente comencé a estudiar por mi cuenta algo de HTML/CSS/Js, uno de mis primeros proyectos fue un reloj. Estaba siguiendo un tutorial sobre cómo hacerlo y, al final, todo parecía funcionar correctamente, pero en lugar de estar centrado, está demasiado a la derecha y parece que no puedo encontrar la manera de arreglar la posición.
var hour = document.getElementById("hour"); var minute = document.getElementById("minute"); var seconds = document.getElementById("seconds"); var clock = setInterval( function time() { var date_now = new Date(); var hr = date_now.getHours(); var min = date_now.getMinutes(); var sec = date_now.getSeconds(); if (hr < 10) { hr = "0" + hr; } if (min < 10) { min = "0" + min; } if (sec < 10) { sec = "0" + sec; } hour.textContent = hr; minute.textContent = min; seconds.textContent = sec; }, 100 ) *, *::before, *:after { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient( 135deg, #8052ec, #d161ff); } .clock { width: 550px; height: 150px; position: absolute; transform: translate(-50% -50%); top: 50%; left: 50%; display: flex; align-items: center; justify-content: space-between; } .clock div { position: relative; background-color: white; height: 100%; width: 150px; display: flex; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; font-size: 60px; color: black; border-radius: 5px; box-shadow: 0 15px 30px rgba(0, 0, 0, .3); letter-spacing: 3px; } .clock span { font-weight: bolder; font-size: 60px; color: white; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Document</title> </head> <body> <div class="clock"> <div id="hour">00</div> <span>:</span> <div id="minute">00</div> <span>:</span> <div id="seconds">00</div> </div> <!--Script--> <script src="script.js"></script> </body> </html>Le falta una coma en su declaración de propiedad de transform .
transform: translate(-50% -50%);debiera ser
transform: translate(-50%, -50%);Manifestación:
var hour = document.getElementById("hour"); var minute = document.getElementById("minute"); var seconds = document.getElementById("seconds"); var clock = setInterval( function time() { var date_now = new Date(); var hr = date_now.getHours(); var min = date_now.getMinutes(); var sec = date_now.getSeconds(); if (hr < 10) { hr = "0" + hr; } if (min < 10) { min = "0" + min; } if (sec < 10) { sec = "0" + sec; } hour.textContent = hr; minute.textContent = min; seconds.textContent = sec; }, 100 ) *, *::before, *:after { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient( 135deg, #8052ec, #d161ff); } .clock { width: 550px; height: 150px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; display: flex; align-items: center; justify-content: space-between; } .clock div { position: relative; background-color: white; height: 100%; width: 150px; display: flex; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; font-size: 60px; color: black; border-radius: 5px; box-shadow: 0 15px 30px rgba(0, 0, 0, .3); letter-spacing: 3px; } .clock span { font-weight: bolder; font-size: 60px; color: white; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Document</title> </head> <body> <div class="clock"> <div id="hour">00</div> <span>:</span> <div id="minute">00</div> <span>:</span> <div id="seconds">00</div> </div> <!--Script--> <script src="script.js"></script> </body> </html>