css图片居中分css图片水平居中和垂直居中两种情况，有时候还需要图片同时水平垂直居中，下面分几种居中情况分别介绍。css图片水平居中利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下：<pre class="brush:html;toolbar:false">&lt;div&nbsp;style=&quot;text-align:&nbsp;center;&nbsp;width:&nbsp;500px;&nbsp;border:&nbsp;green&nbsp;solid&nbsp;1px;&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;alt=&quot;&quot;&nbsp;src=&quot;https://www.baidu.com/img/baidu_jgylogo3.gif&quot;&nbsp;style=&quot;margin:&nbsp;0&nbsp;auto;&quot;&nbsp;/&gt;
&lt;/div&gt;</pre>&nbsp;利用文本的水平居中属性text-align: center代码如下:<pre class="brush:html;toolbar:false">&lt;div&nbsp;style=&quot;text-align:&nbsp;center;&nbsp;width:&nbsp;500px;&nbsp;border:&nbsp;green&nbsp;solid&nbsp;1px;&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;alt=&quot;&quot;&nbsp;src=&quot;https://www.baidu.com/img/baidu_jgylogo3.gif&quot;&nbsp;style=&quot;display:&nbsp;inline-block;&quot;&nbsp;/&gt;
&lt;/div&gt;</pre>css图片垂直居中利用高==行高实现图片垂直居中这种方法是要知道高度才可以使用，代码如下：<pre class="brush:html;toolbar:false">&lt;div&nbsp;style=&quot;text-align:&nbsp;center;&nbsp;width:&nbsp;500px;height:200px;&nbsp;line-height:200px;&nbsp;border:&nbsp;green&nbsp;solid&nbsp;1px;&quot;&gt;
&nbsp;&nbsp;&nbsp;&lt;img&nbsp;alt=&quot;&quot;&nbsp;src=&quot;https://www.baidu.com/img/baidu_jgylogo3.gif&quot;&nbsp;style=&quot;display:&nbsp;inline-block;&nbsp;vertical-align:&nbsp;middle;&quot;&nbsp;/&gt;
&lt;/div&gt;</pre>&nbsp;利用table实现图片垂直居中利用table的方法是利用了table的垂直居中属性，代码如下：这里使用display: table;和display: table-cell;来模拟table，这种方法并不兼容IE6/IE7，IE67不支持display: table，如果你不需要支持IE67那就可以用缺点：当你设置了display: table;可能会改变你的原有布局<pre class="brush:html;toolbar:false">&lt;div&nbsp;style=&quot;text-align:&nbsp;center;&nbsp;width:&nbsp;500px;height:200px;&nbsp;display:&nbsp;table;border:&nbsp;green&nbsp;solid&nbsp;1px;&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;style=&quot;display:&nbsp;table-cell;&nbsp;vertical-align:&nbsp;middle;&nbsp;&quot;&gt;&lt;img&nbsp;alt=&quot;&quot;&nbsp;src=&quot;https://www.baidu.com/img/baidu_jgylogo3.gif&quot;&nbsp;style=&quot;display:&nbsp;inline-block;&quot;&nbsp;/&gt;&lt;/span&gt;
&lt;/div&gt;</pre>&nbsp;利用绝对定位实现图片垂直居中如果已知图片的宽度和高度可以这样，代码如下：<pre class="brush:html;toolbar:false">&lt;div&nbsp;style=&quot;width:&nbsp;500px;height:200px;&nbsp;position:&nbsp;relative;&nbsp;border:&nbsp;green&nbsp;solid&nbsp;1px;&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;alt=&quot;&quot;&nbsp;src=&quot;https://www.baidu.com/img/baidu_jgylogo3.gif&quot;&nbsp;style=&quot;width:&nbsp;120px;&nbsp;height:&nbsp;40px;position:&nbsp;absolute;&nbsp;left:50%;&nbsp;top:&nbsp;50%;&nbsp;margin-left:&nbsp;-60px;margin-top:&nbsp;-20px;&quot;&nbsp;/&gt;
&lt;/div&gt;</pre>&nbsp;移动端可以利用flex布局实现css图片垂直居中移动端一般浏览器版本都比较高，所以可以大胆的使用flex布局，（flex布局参考css3的flex布局用法）演示代码如下：css代码：<pre class="brush:html;toolbar:false">&lt;style&nbsp;type=&quot;text/css&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.ui-flex&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;-webkit-box&nbsp;!important;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;-webkit-flex&nbsp;!important;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;-ms-flexbox&nbsp;!important;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex&nbsp;!important;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-flex-wrap:&nbsp;wrap;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-flex-wrap:&nbsp;wrap;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-wrap:&nbsp;wrap
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.ui-flex,&nbsp;.ui-flex&nbsp;*,&nbsp;.ui-flex&nbsp;:after,&nbsp;.ui-flex&nbsp;:before&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-sizing:&nbsp;border-box
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.ui-flex.justify-center&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-pack:&nbsp;center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-justify-content:&nbsp;center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-flex-pack:&nbsp;center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;center
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.ui-flex.center&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-pack:&nbsp;center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-justify-content:&nbsp;center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-flex-pack:&nbsp;center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-align:&nbsp;center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-align-items:&nbsp;center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-flex-align:&nbsp;center;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;center
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&lt;/style&gt;</pre>html代码：<pre class="brush:html;toolbar:false">&lt;div&nbsp;class=&quot;ui-flex&nbsp;justify-center&nbsp;center&quot;&nbsp;style=&quot;border:&nbsp;green&nbsp;solid&nbsp;1px;&nbsp;width:&nbsp;500px;&nbsp;height:&nbsp;200px;&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;cell&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;alt=&quot;&quot;&nbsp;src=&quot;https://www.baidu.com/img/baidu_jgylogo3.gif&quot;&nbsp;style=&quot;&quot;&nbsp;/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&lt;/div&gt;</pre>

css图片居中（水平居中和垂直居中）

From 本站原创

Still Have Questions?