css__div中 垂直置中

標籤：span   需要   htm   middle   flex   css   class   line   inner   

建一個簡單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;}

備忘：img雖然是inline-block，有時候會發現並沒有跟著span一起置中，這是因為vertical-align屬性導致的需要加上:

.box img{  vertical-align:center;  }

2.flex彈性布局

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

3.display:table-cell

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

css__div中 垂直置中