实现div里的img图片水平垂直居中

body结构

• 
  
• <div>
  
• <img src="1.jpg" alt="haha">
  
• div>
  
• body>
  

方法一：

将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。

• <style type="text/css">
  
• *{margin: 0;padding: 0;}
  
• div{
  
• width:150px;
  
• height: 100px;
  
• display: table-cell;
  
• vertical-align: middle;
  
• text-align: center;
  
• border:1px solid #000;
  
• }
  
• img {
  
• width: 50px;
  
• height: 50px;
  
• }
  
• style>
  

结果如下图所示:

方法二：

通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。

• <style type="text/css">
  
• *{margin: 0;padding:0;}
  
• div{
  
• width:150px;
  
• height: 100px;
  
• position: relative;
  
• border:1px solid #000;
  
• }
  
• img {
  
• width: 50px;
  
• height: 50px;
  
• position: absolute;
  
• top: 50%;
  
• left: 50%;
  
• margin-top: -25px; /* 高度的一半 */
  
• margin-left: -25px; /* 宽度的一半 */
  
• }
  
• style>
  

结果如下图所示：