首页前端开发正文

在div中实现图片垂直居中

朱绪2017-06-032239CSS

在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>

浏览器预览效果:

在div中实现图片垂直居中

如上图,已经实现了垂直居中的效果。如果想看起来更美观一些,还可以加上text-align: center;

因为div是block类型的,所以vertical-align属性对它是不管用的。

如果想要在div中实现图片的垂直居中,我们可以先给div定义display: table-cell,即将block元素转化成table-cell元素(表格单元格),然后再使用vertical-align:middle就能够实现了。