[分享]css两列固定宽度居中显示

CSS中实现两列固定宽度居中显示是一个常见而又常用的网站设计技巧。这种布局通常用于网站的页头、页脚或侧边栏等地方。对于这种布局，我们需要使用到CSS的浮动和定位属性。下面是实现这种布局的CSS代码：....

CSS中实现两列固定宽度居中显示是一个常见而又常用的网站设计技巧。这种布局通常用于网站的页头、页脚或侧边栏等地方。

对于这种布局，我们需要使用到CSS的浮动和定位属性。下面是实现这种布局的CSS代码：

.column1 {
  float: left;
  width: 200px;
}

.column2 {
  position: absolute;
  right: 0;
  width: 200px;
}

.container {
  position: relative;
  margin: 0 auto;
  width: 400px;
} 

在这段代码中，我们使用了一个容器元素（class为“container”），它被设置为相对定位，并且水平居中对齐。两个列元素（class分别为“column1”和“column2”）分别设置了浮动和绝对定位，使它们能够占据容器中的两侧。

需要注意的是，为了避免“column2”元素遮盖住“column1”元素，我们需要将“column2”元素的“right”属性设置为0，使其与容器的右侧对齐。同时，我们还需要为容器元素设置宽度，保证两列元素均能正确排列。

在实践中，我们还可以为两列元素添加背景色、边框、圆角和阴影等特效，以使网站页面更加美观和现代化。