在div中实现图片的垂直居中是一个比较常见的技巧,下面我们来看一个实例吧:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ display: table-cell; vertical-align: middle; width: 120px; height: 120px; border: 1px solid gray; } </style> </head> <body> <div><img src="kb.jpg" /></div> </body> </html>
浏览器预览效果:
如上图,已经实现了垂直居中的效果。如果想看起来更美观一些,还可以加上text-align: center;
因为div是block类型的,所以vertical-align属性对它是不管用的。
如果想要在div中实现图片的垂直居中,我们可以先给div定义display: table-cell,即将block元素转化成table-cell元素(表格单元格),然后再使用vertical-align:middle就能够实现了。