在设计网页的时候，经常需要居中，比如我设计了一张图片，我需要放图片中间，如果单纯用代码调用，这个图片肯定是接着图片的，那么如何居中呢？下面我们演示代码。

有很多种办法，我们一种一种谈。

第一种使用DIV布局，也就是用CSS代码来居中，我们可以看下面代码。

.main{ text-align: center; /*这里设置居中文字或者更换为图片代码*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

这段代码，是让里面的文字居中或者图片居中，我们需要设置CSS也就是这段文字居中的具体数值，通过TOP LEFE等来设置，目前来看设置的是border-radius: 20px; width: 300px; height: 350px;

第二种办法：设置图片居中。

Img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中；（有的设计师为图片再加个div标签，然后通过div标签的margin实现居中）。

如果图片在div中下的span属性中，必须转换成display：block；然后padding-top:10px。

第三者直接把代码加入到你的代码里。

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="img/baidu_jgylds3.gif" style="margin: 0 auto;" />
</div>

上面这段代码来看，是调用了一张图片。，默认已经设置好了居中代码，咱们只需要在你的需要居中的文档前加入

<div style="text-align: center; width: 500px; border: green solid 1px;">
然后在到你需要居中的文字或者图片后加入

</div>即可，这种方式比较简单适合所有人。

其实不管任何方式的居中，你都需要在代码里直接用代码实现，或者调用CSS实现，所以，你可以在网上寻找居中代码，在你代码2头加入你需要居中的代码即可，这个不行换一个，一般都可以实现。