在一个DIV内,在浏览器水平垂直居中，按当前日期动态计算并显示如下信息。 现在是XXXX年XX月XX日 XX点XX分XX秒 距2023年12月31日还有XX 天！的整体代码

这是一个比较复杂的要求，需要使用 JavaScript 来实现。以下是实现这个效果的代码：

HTML 代码：

<div id="center">
  <div id="clock"></div>
  <div id="countdown"></div>
</div>

CSS 代码：

#center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#clock, #countdown {
  font-size: 18px;
  font-weight: bold;
}

JavaScript 代码：

function displayClock() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var date = now.getDate();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  
  month = addZero(month);
  date = addZero(date);
  hour = addZero(hour);
  minute = addZero(minute);
  second = addZero(second);
  
  var clockText = "现在是" + year + "年" + month + "月" + date + "日 " + hour + "点" + minute + "分" + second + "秒";
  document.getElementById("clock").innerHTML = clockText;
  
  var countdownText = "距2023年12月31日还有" + getDaysUntil(2023, 12, 31) + "天！";
  document.getElementById("countdown").innerHTML = countdownText;
}

function addZero(num) {
  return (num < 10 ? "0" : "") + num;
}

function getDaysUntil(year, month, date) {
  var now = new Date();
  var target = new Date(year, month - 1, date);
  var timeDiff = target.getTime() - now.getTime();
  var daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
  return daysDiff;
}

setInterval(displayClock, 1000);

这段代码会在页面中心创建一个包含两个 DIV 的容器，分别用于显示当前时间和距离目标日期的倒计时。在 JavaScript 中，通过获取当前时间和目标时间的时间差，可以计算出距离目标日期还有多少天。定时器每秒钟调用一次 `displayClock()` 函数，更新时间和倒计时的显示。