css__div中 垂直居中

建一个简单html模板：

<div class="box" style="height:100px;width:100px;text-align:center">
   <span class="inner">line</span>
　 <img src="" style="width:10px;height:10px;"/>
</div>

1.使用line-height

在div高度固定的情况下，并且不会换行的时候可以用。(注：如果出现换行，那么每一行都有容器那么高)

.box{
   line-height:100px;
}

line 　

line 　

备注：img虽然是inline-block，有时候会发现并没有跟着span一起居中(如上)，这是因为vertical-align属性导致的需要加上:

.box img{
  vertical-align:center;  
}

2.flex弹性布局

.box{
  display:flex;
  align-items:center;  
}

line 　

3.利用display:table和display:table-cell

.box{
  display:table;
}
.inner{
  display:table-cell;
　vertical-align:middle
}

line 　

备注：为啥没有写img标签的属性呢？emmm...其实写了，只不过没作用而已，并且给img的table-cell写上line-height照样不起作用，除非用一个容器把它包裹起来。没有找到其他号方法，还望指点。

4.定位+transform

.box{
     position:relative;
}
.inner,.box img{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

line 　

  5.position+位置全0+margin:auto;

.box{
    position:relative;    
}
.inner,.box img{
    position:absolute;
    margin: auto;
    left:0;
    top:0;
    bottom:0;
    right:0;
}

line 　

 备注：在这里面img生效了，文字并没有理我；把它display:block;display:inline-blcok;也一样没有理我，不知道为啥。

6.display:inline-block+after

.inner,.box img{
    display:inline-block;
    vertical-align:middle;
}
.inner::after,.box img::after{
    content:' ';
    font-size:10;
    width:0;
    height:100px;
    display:inline-block;
    vertical-align: middle;
}

备注：这种也可以实现，但是inline-block的样式比较难控制，实际应用当中，特别是文字如果出现折行现象，会把after给换行下去，同样会造成类似于line-height:100px;的效果。

7.flex+marign:auto

.box{
  display:flex;
}
.inner,.box img{
  margin:auto ;
}

line 　

 参考地址：https://www.cnblogs.com/hutuzhu/p/4450850.html

转载于:https://www.cnblogs.com/xin-note/p/9603526.html