How to vertically center a picture
The effect diagram is as follows:
The first:
Mainly use display:table-cell This element will be displayed as a table cell (similar to <td> and <th>)
Compatible with IE8 and above browsers
HTML code
<div class="divCon img_wrap"> <p><img src="../TIM截图20180504094302.png" /></p> </div>
css code
.divCon{ width: 400px; height: 300px; border: 1px dashed #ccc; display: table-cell; vertical-align: middle; text-align: center; } .divCon img{ width: 50px; height: 50px; }
The second: background image method
Compatible with browsers above ie6
HTML code
<div class="divCon img_wrap"> </div>
css code
.img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; background: url(TIM截图20180504094302.png) no-repeat center center; }
The third: use the line-height and text-align of the p tag: center;
Compatible with IE8 and above browsers
HTML code
<div class="divCon img_wrap"> <p><img src="TIM截图20180504094302.png" /></p> </div>
css code
*{margin: 0px;padding: 0px} .img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; text-align: center; margin: 200px auto } .img_wrap p{ width:400px; height:300px; line-height: 300px; /*Line height equals height*/ } .img_wrap p img{ vertical-align:middle; border:1px solid #ccc; }
Source of the original article: https://www.cnblogs.com/sese/p/5941389.html