为了用CSS使你的图片居中以使得它始终在页面中央，我们必须对CSS文件和image标签进行一点小的修改。

CSS部分

让图片居中意味着我们需要在CSS文件中创建一个用来居中的类...

img.center { 

    display: block; 

    margin-left: auto; 

    margin-right: auto;

}

image标签部分

我们要给需要居中的图片添加"center"这个类...

CSS 代码:

<img src="images/yourimagefile.jpg" class="center" />

就这么简单！（下面会对这种方法做详细s说明）

---

方法说明

如果你不太确定要怎么做...

这里有关于上面这种方法的更详细的说明。我们会仔细地解释。

使用CSS来达到居中效果

你的网页需要调用CSS文件所包含的指令来使页面元素居中显示。为了使用CSS的功能，我们需要修改CSS文件和HTML文档。

首先你需要修改CSS文件并且添加如下代码...

img.center { 

    display: block; 

    margin-left: auto; 

    margin-right: auto;

}

在CSS，这被叫做创建一个"类"。当这个类被调用时，它将指示你的图片如何显示。在这里，这个特定的类叫"center"。

一旦你在CSS文件中添加了这些，你还需要告诉图片使用哪些指令。所以，找到你需要居中的那张图片的image标签并且修改它，然后它就知道要使用哪个指令了...

<img src="images/yourimagefile.jpg" class="center" />

在上面的代码中你可以看到，我们添加了一个名叫"center"的"类"。现在这张图片就知道要从哪里得到它的指令了。

一旦CSS文件和HTML中的image标签被修改之后，图片就会出现在整个页面或者你所放置的区域的中央。
即使你缩小或者扩大浏览器窗口，这张图片也始终会显示在中央。在CSS代码中我们对左侧和右侧的magrin属性都设置了"auto"。效果是两侧都有一个等宽的区域，因此图片就被居中了。无论图片所处的区域的大小，图片都始终显示在中央（或者更确切地说，图片始终在左右两侧拥有相同的外边距[margin]）。