CSS-布局【1】-图片在div中垂直居中

方法一：通过增加100%高度行内块居中对齐

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 220px;
            text-align: center;
            border: 1px solid red;
        }

        span{
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <span></span><img src="demo.jpg">
    </div>
</body>
</html>

方法二：通过table/table-cell样式居中

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 220px;
            text-align: center;
            border: 1px solid red;
            display: table;
        }

        span{
            display: table-cell;     
            vertical-align: middle;       
        }

        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="container">
        <span><img src="demo.jpg"></span>
    </div>
</body>
</html>

方法三：设置为背景图片居中

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 220px;
            text-align: center;
            border: 1px solid red;
            background-image: url('demo.jpg');
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

相关阅读:
jdk1.8 操作List<Map> 多个map 具有相同的key 进行分组合并重组数据
js获取字符中连续的值
Java线程ABA问题
Oracle递归查询语句
Oracle学习笔记表连接（十六）
Docker For Mac没有docker0网桥
awk 和 sed (Stream Editor)
WARNING: firstResult/maxResults specified with collection fetch; applying in memory!
iptables编写规则
InnoDB Next-Key Lock

原文地址：https://www.cnblogs.com/godcity/p/5344478.html