纯CSS实现上下左右都居中的代码

在面对那些“顽固不化”的浏览器时，如IE7，我们有时会感到束手无策。但经过不断的尝试与努力，终于找到了一个“万能解决方案”，让我们可以无视这些浏览器的特殊行为，实现内容的完美居中。

```css

body {

display: flex; / 使用Flex布局模型 /

justify-content: center; / 水平居中对齐 /

align-items: center; / 垂直居中对齐 /

height: 100vh; / 让body占据整个视口高度 /

margin: 0; / 移除默认边距 /

}

```

在这段代码中，我们使用了Flex布局模型来实现内容的居中。Flex布局是现代CSS中非常强大的布局方式之一，它允许我们轻松地对元素进行对齐、排序和分布空间。通过设置`justify-content`和`align-items`属性为`center`，我们可以确保内容在水平和垂直方向上都居中对齐。将`height`设置为`100vh`是为了确保body占据整个视口的高度，这样内容无论页面大小如何都能保持居中。

这个实现方法简洁明了，对于现代浏览器和诸如IE7这样的老版本浏览器都有很好的兼容性。当我们遇到那些需要特殊处理的浏览器时，可以使用相应的CSS hack进行微调，但大多数情况下，这段纯CSS代码已经足够应对大多数场景了。