css中position-fixed实现div居中上下左右居中

在网页设计中，我们时常需要将某个元素置于浏览器窗口的中央，实现这种效果其实并不复杂，只需要运用CSS中的定位属性即可。以下是一个让DIV元素在浏览器窗口中居中的示例代码。

考虑一个简单的居中方式，当你的DIV元素只需要左右居中时，可以这样设置：

```css

div {

position: fixed;

margin: auto;

left: 0;

right: 0;

top: 0; / 或根据需要设置具体值 /

bottom: 0; / 或根据需要设置具体值 /

width: 200px; / 根据需要设置宽度 /

height: 150px; / 根据需要设置高度 /

}

```

只需将 `bottom: 0;` 或 `top: 0;` 删除即可实现仅左右居中的效果。如果你需要上下左右都居中，那么可以通过另一种方式实现。

对于复杂的居中需求，例如同时实现水平和垂直居中，我们可以使用一个带有相对定位的`.dialog`类来实现：

```css

.dialog {

position: fixed; / 固定位置，使其不会随着页面滚动而移动 /

_position: absolute; / IE6 下的 hack /

z-index: 1; / 确保元素在其他内容之上 /

top: 50%; / 将顶部置于视口中央 /

left: 50%; / 将左侧置于视口中央 /

margin: -141px 0 0 -201px; / 通过负边距调整位置，使DIV居中 /

width: px; / 设置DIV的宽度 /

height: 280px; / 设置DIV的高度 /

border: 1px solid CCC; / 添加边框 /

line-height: 280px; / 设置文本垂直对齐 /

text-align: center; / 水平对齐文本 /

font-size: 14px; / 设置字体大小 /

background-color: F4F4F4; / 设置背景颜色 /

overflow: hidden; / 防止内容溢出 /

}

```

这样设置的`.dialog`类可以将任何带有该类的`