css图⽚居中（⽔平居中和垂直居中）
css图⽚居中(⽔平居中和垂直居中)
css图⽚居中分css图⽚⽔平居中和垂直居中两种情况，有时候还需要图⽚同时⽔平垂直居中，下⾯分⼏种居中情况分别介绍。
css图⽚⽔平居中
利⽤margin: 0 auto实现图⽚⽔平居中
利⽤margin: 0 auto实现图⽚居中就是在图⽚上加上css样式margin: 0 auto 如下：
<div >
<img alt="" src="www.baidu/img/baidu_jgylogo3.gif" />
</div>
利⽤⽂本的⽔平居中属性text-align: center
代码如下:
<div >
<img alt="" src="www.baidu/img/baidu_jgylogo3.gif" />
</div>
css图⽚垂直居中
利⽤⾼==⾏⾼实现图⽚垂直居中
这种⽅法是要知道⾼度才可以使⽤，代码如下：
<div >
<img alt="" src="www.baidu/img/baidu_jgylogo3.gif" />
</div>
利⽤table实现图⽚垂直居中
利⽤table的⽅法是利⽤了table的垂直居中属性，代码如下：
这⾥使⽤display: table；和display: table-cell；来模拟table，这种⽅法并不兼容IE6/IE7，IE67不⽀持display: table，如果你不需要⽀持IE67那就可以⽤缺点：当你设置了display: table；可能会改变你的原有布局
<div >css设置文字垂直居中
<span ><img alt="" src="www.baidu/img/baidu_jgylogo3.gif" /></span>
</div>
利⽤绝对定位实现图⽚垂直居中
如果已知图⽚的宽度和⾼度可以这样，代码如下：
<div >
<img alt="" src="www.baidu/img/baidu_jgylogo3.gif" /> </div>
移动端可以利⽤flex布局实现css图⽚垂直居中
移动端⼀般浏览器版本都⽐较⾼，所以可以⼤胆的使⽤flex布局，（flex布局参考）演⽰代码如下：
css代码：
<style type="text/css">
/*web前端开发www.51xuediannao/*/
.ui-flex {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-flex-wrap: wrap;
-
ms-flex-wrap: wrap;
flex-wrap: wrap
}
.ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
box-sizing: border-box
}
.ui-flex.justify-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
. {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
</style>
html代码：
<div class="ui-flex justify-center center" > <div class="cell">
<img alt="" src="www.baidu/img/baidu_jgylogo3.gif" />
</div>
</div>
本⽂链接：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。