You have a ton of code you don't need. The easiest way to do this is to wrap the days, hours, and minutes into a .container then text-align:center; the container.
I've also added a wrapper containing everything and applied this:
.wrapper {
text-align: center;
}
Which will center everything on the page as well.
I did my best to clean up your code but check it out, everything is centered even when the numbers change.
let days=document.getElementById("days");
let hours=document.getElementById("hours");
let minutes=document.getElementById("minutes");
let seconds=document.getElementById("seconds");
function timeDiffCalc(dateFuture, dateNow) {
arr=[];
let diffInMilliSeconds = Math.abs(dateFuture - dateNow) / 1000;
// calculate days
const days = Math.floor(diffInMilliSeconds / 86400);
diffInMilliSeconds -= days * 86400;
// calculate hours
const hours = Math.floor(diffInMilliSeconds / 3600) % 24;
diffInMilliSeconds -= hours * 3600;
// calculate minutes
const minutes = Math.floor(diffInMilliSeconds / 60) % 60;
diffInMilliSeconds -= minutes * 60;
arr.push(days,hours,minutes,diffInMilliSeconds.toFixed(0))
return arr;
}
function changeTime(){
var time=timeDiffCalc(new Date('2022/1/1 0:0:0'), new Date())
days.textContent=time[0]
hours.textContent=time[1]
minutes.textContent=time[2]
seconds.textContent=time[3]
}
setInterval(function(){changeTime()},1000)
@import url(https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700,900);
body{
background-image: url("happy-new-year-2021_10.jpg");
backdrop-filter: blur(7px);
color:black;
}
.wrapper {
text-align: center;
}
.container{
display: inline-block;
text-align: center;
}
.container span {
margin: 25px;
}
#hours{
font-size:60px;
font-weight:150;
}
#minutes{
font-size:60px;
font-weight:150;
}
#seconds{
font-size:60px;
font-weight:150;
}
#days{
font-size:100px;
font-weight:350;
margin: 0;
padding: 0;
}
h1{
font-family: roboto;
font-size:70px;
font-weight:400;
}
span{
font-family: roboto;
}
p{
font-family: roboto;
}
#date{
font-weight:lighter;
font-size: 14px;
}
.day-label{
font-weight:40;
font-size:25px;
}
.hour-label{
font-weight:lighter;
font-family: roboto;
}
.minute-label{
font-weight:lighter;
font-family: roboto;
}
.second-label{
font-weight:lighter;
font-family: roboto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<p id="label">How many days until</p>
<h1>New Year's Day</h1>
<p id="date">Saturday, 1 January 2022</p>
<p id="days">days</p>
<p class="day-label">days</p>
<div class="container">
<span id="hours">21</span><br>
<span class="hour-label">hours</span>
</div>
<div class="container">
<span id="minutes">2</span><br>
<span class="minute-label">minutes</span>
</div>
<div class="container">
<span id="seconds">21</span><br>
<span class="second-label">seconds</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
