css怎么设置图片位置居中

本文操作环境：windows10系统、css 3、ThinkPad t480电脑。

具体方法如下：

1、利用display:table-cell，具体代码如下：

htML代码如下：

div class="img_wrap">
     　　img src="wgs.jpg">
    /div>
    

css代码如下：

.img_wrap{
        width: 400px;
        height: 300px;
        border: 1px dashed #ccc;
        display: table-cell;
     //主要是这个属性    vertical-align: middle;
        text-align: center;
}
    

效果如下：

2、采用背景法：

html代码如下：

div class="img_wrap">
    /div>
    

css代码如下：

.img_wrap{
        width: 400px;
        height: 300px;
        border: 1px dashed #ccc;
        background: url(wgs.jpg) no-rePEat center center;
}
    

效果如下图：

（学习视频分享：css视频教程）

3、图片外面用个p标签，通过设置line-height使图片垂直居中：

html代码如下：

 div class="img_wrap">
         p>
    img src="wgs.jpg">
    /p>
     /div>
    

css代码如下：

*{
    margin: 0px;
padding: 0px}
.img_wrap{
        width: 400px;
        height: 300px;
        border: 1px dashed #ccc;
        text-align: center;
}
.img_wrap p{
        width:400px;
        height:300px;
        line-height:300px;
  /* 行高等于高度 */}
.img_wrap p img{
        *margin-top:exPression((400 - this.height )/2);
      /* CSS表达式用来兼容IE6/IE7 */    vertical-align:middle;
        border:1px solid #ccc;
}
    

效果图如下：

相关推荐：CSS教程

以上就是css怎么设置图片位置居中的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！