How to set the image position to center in css

How to center the image in css: You can add a p tag outside the image, and then center the image by setting the line-height attribute, such as [

p> line-height:300px;].

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

The specific method is as follows:

1. Use display:table-cell, the specific code is as follows:

html code is as follows:

<div class="img_wrap">
 　　<img  src="/static/imghw/default1.png"  data-src="wgs.jpg"  class="lazy"   alt="How to set the image position to center in css" >
</div>

css code is as follows:

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

The effect is as follows:

2. Use the background method:

The html code is as follows:

<div class="img_wrap"></div>

css code is as follows:

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

The effect is as shown below:

(Learning video sharing: css video tutorial)

3. Use a p tag outside the picture, and set the line-height to center the picture vertically:

html code is as follows:

 <div class="img_wrap">
     <p><img  src="/static/imghw/default1.png"  data-src="wgs.jpg"  class="lazy"   alt="How to set the image position to center in css" ></p>
 </div>

css code is as follows:

*{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;
}

Effect The picture is as follows:

Related recommendations: CSS tutorial

The above is the detailed content of How to set the image position to center in css. For more information, please follow other related articles on the PHP Chinese website!