图片居中方法：1、利用“margin:0 auto”实现水平居中；2、利用“text-align:center”实现水平居中；3、利用line-height实现垂直居中；4、利用table实现垂直居中；5、利用position实现垂直居中。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
一、首先，我们来看看css图片水平居中的方法
1、利用margin:0 auto实现图片水平居中
html图片水平居中代码：
<div> @@##@@ </div>
2、利用文本的水平居中属性text-align:center实现图片水平居中
html图片水平居中代码：
<div> <div> @@##@@ </div> <h2>二、我们来看看css图片垂直居中的实现方法</h2> <p><strong>1、利用<code>line-height</code>实现图片垂直居中</strong></p> <p>html图片垂直居中代码如下：</p> <pre class="brush:php;toolbar:false"><div> @@##@@ </div>
注意：此种方法需要注明高度才可以使用。
2、利用table实现图片垂直居中
html图片垂直居中代码如下：
<div> <span> @@##@@ </span> </div>
注意：此种方法是利用了table的垂直居中属性
说明：这里使用display:table;和display:table-cell;来模拟table，这种方法并不兼容IE6/IE7，IE67不支持display:table，如果你不需要支持IE67那就可以用
这种方法有一个缺点：当你设置了display:table;可能会改变你的原有布局
3、利用position实现图片垂直居中
html图片垂直居中代码如下：
<div> @@##@@ </div>
说明：如果已知图片的宽度和高度可以用这种方法。
推荐学习：html5视频教程
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
