要在页面上垂直对齐并保持元素等高，可以使用Flexbox布局或Grid布局。下面是使用Flexbox布局的示例代码：

HTML代码：

  
Box 1
  
Box 2
  
Box 3

CSS代码：

.container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.box {
  flex: 1; /* 平分容器的宽度 */
  border: 1px solid black;
  padding: 10px;
}

在这个示例中，.container是一个Flex容器，align-items: center;属性将容器中的项目垂直居中对齐。.box是Flex容器中的项目，flex: 1;属性将项目平均分配容器的宽度，使它们保持等高。

如果你想使用Grid布局，可以修改示例代码如下：

HTML代码：

  
Box 1
  
Box 2
  
Box 3

CSS代码：

.container {
  display: grid;
  align-items: center; /* 垂直居中对齐 */
  grid-template-columns: 1fr; /* 列宽平分容器 */
}

.box {
  border: 1px solid black;
  padding: 10px;
}

在这个示例中，.container是一个Grid容器，align-items: center;属性将项目垂直居中对齐。grid-template-columns: 1fr;属性将列宽平分容器的宽度，使它们保持等高。

以上是使用Flexbox布局和Grid布局实现保持元素等高并在页面上垂直对齐的示例代码。你可以根据自己的需求选择其中一种布局方法。