在CSS中，可以使用以下方法来控制页面元素的垂直和水平居中方式：
使用Flexbox布局可以轻松实现元素的居中对齐，只需将包裹元素的display属性设置为flex，然后使用align-items和justify-content属性来控制元素的垂直和水平居中方式。
.parent {
display: flex;
align-items: center;
justify-content: center;
}
使用Grid布局也可以轻松实现元素的居中对齐，只需将包裹元素的display属性设置为grid，然后使用place-items属性来控制元素的垂直和水平居中方式。
.parent {
display: grid;
place-items: center;
}
使用绝对定位可以将元素相对于其父元素居中对齐，只需将要居中的元素的position属性设置为absolute，然后使用top、bottom、left和right属性来控制元素的位置。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
其中，top和left属性表示元素的左上角相对于父元素左上角的距离，而transform属性的translate函数则用于将元素的中心点移动到父元素的中心点。
综上所述，以上三种方法都可以用来控制页面元素的垂直和水平居中方式，具体使用哪种方法，可以根据实际情况进行选择。