让行内元素（如图片）在div中水平垂直居中（干货）

￡神魔★判官ぃ 2021-06-26 16:06 345阅读 0赞

## （1）第一种：用`vertical-align` ##

<div class="method1">
      <span class="tiptop"></span>
      <iimg class="test" src="img/Dota2.jpg" alt="dota2">
    </div>
     
     
    <style> .method1{ text-align:center; } /*vertical-align:middle 是依赖div内子元素最高的行高来实现对某元素居中的，而我们只需要建立一个新元素，给他加上inline-block属性 再把他高度设置为100%就行了,在下面的![在这里插入图片描述]()设置vertical-align就生效了*/ .tiptop{ height:100%; display:inline-block; vertical-align:middle; } img{ vertical-align:middle; } </style>

## （2）第二种：`flex`布局（注意浏览器兼容性） ##

<div class="method2">
        <iimg src="img_p1_title.png">
        </div>
         
         
        <style> .method2 { display: flex; justify-content: center; //弹性盒子对象在主轴上的对齐方式 align-items: center; //定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 background-color:#00a0e9; height:200px; } .method2 img { width:20px; height:30px; background-color:#0A58A0; } </style>

## （3）`position:absolute;`绝对定位方式 ##

<div class="method3">
          <span>第三种方法</span>
        </div>
              
        <style> .method3 { width:100%; height: 200px; font-size: 18px; position: relative; background-color:#00a2d4; } .method3 span { width:100px; height:100px; background-color:#00ACED; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>

（4）使用`display:table-cell`配合`vertical-align:center`（淘宝也是这样用的）

<div class="method4">
          <span>第四种方法</span>
        </div>
         
         
        <style> .method4 { width: 200px; height: 200px; vertical-align: middle; display: table-cell; /*只支持IE8+及现代浏览器，与position:absolute;或float:left;属性尽量不一起用*/ text-align: center; background-color:#00ACED; } .method4 span{ width:100px; height:100px; background-color:#0A58A0; } </style>