完全纯css实现div自适应居中兼容IE7 Chrome FireFox

对于纯粹的CSS设计，无需借助JS的力量，这无疑是对JS程序员的伟大解放。在无需JavaScript的情况下，我们可以利用CSS创造出令人惊叹的效果。我们不再依赖于复杂的脚本和冗长的代码，只需通过简单的样式定义就能实现网页的交互和动态效果。

对于IE7和IE8浏览器中的rgba属性失效问题，早期我曾遇到并解决了这个挑战。若要实现半透明效果，一种常见的方法是添加一个额外的div。但我选择偷懒并找到了其他方法，成功避开了这个步骤。中间的div可以承载一个灿烂的笑容，象征着开发过程中的轻松与愉悦。

在弹出层的设计中，每个人都可以根据自己的需求设置z-index。在这里，我没有特定的z-index设置，保持了其通用性和灵活性。对于IE6的支持，由于资源和时间的限制，我暂时未能对其进行测试，对此我深感抱歉。

DOM结构如下：

```html

```

对应的CSS样式如下：

```css

.pop-wrap {

position: fixed;

top: 0;

background: rgba(0, 0, 0, .8);

left: 0;

width: 100%;

height: 100%;

}

.pop-wrap table {

height: 100%;

width: 100%;

}

.pop-wrap td {

width: 100%;

height: 100%;

}

div.pop {

margin: 0 auto;

width: 200px;

background: ECECEC;

padding: 20px;

text-align:center;

}

div.pop p {

font: 200 14px/20px Microsoft YaHei;

}

div.pop input {

background: FFFFFF;

border: 1px solid ADADAD;

padding: 3px 10px;

border-radius : 2px;

cursor: pointer;

}

```

当这一切完成时，我们得到了一个简洁而富有表现力的弹出层设计。无需复杂的JavaScript代码，只需简单的CSS样式定义，即可实现良好的用户体验。这就是现代网页设计的魅力所在。