在网页中创建一个元素，用显示现在时间，编写样式，让此元素呈长方形有背景颜色并处于页面中间

要在网页中创建一个显示当前时间的长方形元素，并添加样式使其居中且有背景颜色，你可以按照以下步骤操作：

首先，使用HTML创建一个`<div>`元素作为容器，这将代表你的长方形：

<div id="time-container"></div>

然后，在CSS部分，设置样式包括背景颜色、宽度、高度、文本内容（当前时间）、位置及边距等属性：

#time-container {
  display: flex;
  justify-content: center; /* 居中 */
  align-items: center; /* 纵向居中 */
  width: 200px; /* 长度，根据需要调整 */
  height: 50px; /* 高度，根据需要调整 */
  background-color: #f2f2f2; /* 背景色，可自定义 */
  border-radius: 10px; /* 圆角效果 */
  color: #333; /* 文本颜色 */
  font-size: 16px;
  padding: 10px; /* 内边距，增加空间感 */
  box-sizing: border-box; /* 计算盒模型包含边框和内填充 */
}

/* 使用JavaScript获取当前时间 */
<script>
function updateTime() {
  const timeElement = document.getElementById('time-container');
  const now = new Date();
  timeElement.textContent = now.toLocaleTimeString(); // 格式化时间
}
</script>

<!-- 更新时间函数每秒运行一次 -->
setInterval(updateTime, 1000);

上述代码中，我们使用了JavaScript定时更新`<div>`内的当前时间。当浏览器加载完成后，会立即显示初始时间，并在之后每隔一秒更新。