css中怎么将div居中显示图片

css将div居中显示图片的方法：1、利用图片的margin属性将图片水平居中，代码如“margin:0 auto; ”；2、利用div的padding属性将图片垂直居中，代码如“padding-top:50px; ”。

本教程操作环境：Windows7系统、Dell G3电脑、HTML5& & CSS3版。

css怎么将图片在div中居中显示？

图片在div中居中的方式

利用图片的margin属性将图片水平居中，利用div的padding属性将图片垂直居中。

结构代码同上；

css代码如下：

div {
    width:300px;
    height:150px;
     background-color:#eee;
     padding-top:50px;
     border:#000 1px solid;
}
 img {
    display:block;
     margin:0 auto;
}
    

备注：

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

思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。（推荐：css视频教程）

结构如下：

style tyPE="text/css">
 div{
      width:180px;
      height:180px;
      border:1px solid #000;
      posITion:relative;
      display:table-cell;
      text-align:center;
      vertical-align:middle;
 }
 div p{
      position:static;
      +position:absolute;
      top:50%;
 }
 div img{
      position:static;
      +position:relative;
      top:-50%;
      left:-50%;
 }
     /style>
     div>
    p>
    img src="0225/12986229678396.jpg" width="120" height="120">
    /p>
    /div>
    br>
    div>
    p>
    img src="0225/12986229678396.jpg" width="160" height="160">
    /p>
    /div>
    

方法二

div>
    img src="images/tt.gif" width="150" height="100" />
    /div>
css样式如下：div {
    width:300px;
     height:150px;
    background-color:#ccc;
     border:#000 1px solid;
     text-align:center;
     padding-top:50px;
}
    

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

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