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