div里面的图片垂直居中

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

外面一个div, 里面是一张大小不固定的图片, 或者span,div都行, 要实现里面元素水平垂直居中对齐

其实有很多实现的方法, 比如用js去计算每一个子元素的高度, 通过js去动态设置magin值, 不过这有点麻烦

今天分享一种用css实现的水平垂直居中对齐

看代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
height: 300px;
width: 300px;
margin-top: 80px;
background-color: #ccc;
text-align: center;
}
.box:after {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.img {
display: inline-block; /*如果是图片就不用写着一条, 如果不是图片必须加上*/
vertical-align: middle;
height: 100px;
width: 100px;
background-color: #f66;
}
</style>
</head>
<body>
<div class="box">
<div class="img"></div>
</div>
</body>
</html>