在网页设计中，页面布局是一个至关重要的环节。一个美观、舒适的页面布局能够提升用户体验，让浏览者更加愿意停留在你的网页上。而在众多布局方式中，居中布局因其简洁、大气而备受青睐。今天，就让我们一起探索JSP网页居中的实例，让你的网页布局焕然一新！
一、居中布局的原理
在JSP中，实现居中布局主要依靠CSS样式。下面，我们先来了解一下居中布局的原理。
1. 水平居中
水平居中可以通过以下几种方法实现：
（1）使用margin属性：设置左右margin为auto，实现水平居中。
（2）使用flex布局：通过设置父元素的display属性为flex，并设置justify-content属性为center，实现水平居中。
（3）使用grid布局：通过设置父元素的display属性为grid，并设置justify-content属性为center，实现水平居中。
2. 垂直居中
垂直居中可以通过以下几种方法实现：
（1）使用line-height属性：设置line-height等于父元素的高度，实现垂直居中。
（2）使用flex布局：通过设置父元素的display属性为flex，并设置align-items属性为center，实现垂直居中。
（3）使用grid布局：通过设置父元素的display属性为grid，并设置align-items属性为center，实现垂直居中。
二、JSP网页居中实例
接下来，我们将通过几个实例来展示如何实现JSP网页的居中布局。
1. 水平居中实例
实例描述：将一个红色矩形块水平居中显示在浏览器窗口中。
代码实现：
```html
