这是一个三栏的布局，并且是居中显示的。其中，A栏是主体内容栏，B栏和C栏都是侧边栏。首先，我们不可能直接用绝对定位将A、B、C三栏定位到居中的位置，因为每个人显示器的分辨率是不同的，在1024X768分辨率的显示器上定位的居中效果，在别的分辨率的显示器上看到的效果肯定不会是居中显示的，那么，该如何解决这个问题呢？

可以使用 flex 布局来实现三栏居中显示。具体步骤如下：

1. 在 HTML 中将 A、B、C 三栏分别放在一个 div 容器中。

2. 在 CSS 中设置整个页面的容器为 flex 布局，并设置主轴方向为水平。

3. 在 A、B、C 三个容器上设置宽度，并将 B、C 两个容器的 order 属性设置为 1，使它们在 HTML 中的位置在 A 的后面，但在页面显示中排在 A 的前面。

4. 将 A 容器的 margin-left 和 margin-right 属性都设置为 auto，这样 A 容器就会在页面中居中显示。

5. 最后，可以通过设置 A、B、C 三个容器的 padding 和 margin 属性，调整页面的样式和布局。

下面是示例代码：

HTML 代码：

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: center; /* 将容器内的元素居中 */
  align-items: center;
}

.a {
  width: 60%; /* 设置 A 容器的宽度 */
  margin-left: auto; /* 将 A 容器居中 */
  margin-right: auto;
}

.b, .c {
  width: 20%; /* 设置 B、C 容器的宽度 */
  order: 1; /* 将 B、C 容器的顺序调整到 A 容器后面 */
}

/* 可以根据需要设置 A、B、C 容器的 padding 和 margin 属性 */