写一个微信小程序，页面横断线，分割上下文字

以下是一个简单的微信小程序代码，实现页面横断线，分割上下文字的效果：

<!--index.wxml-->
<view class="container">
  <view class="top">上面的文字</view>
  <view class="line"></view>
  <view class="bottom">下面的文字</view>
</view>

/*index.wxss*/
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.top,
.bottom {
  font-size: 24px;
  color: #333;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 20px 0;
}

你可以将以上代码复制到小程序编辑器中，然后预览效果。该代码使用 flex 布局实现页面垂直居中，使用一个 1 像素高的 div 实现横断线效果。