html CSS图片完美垂直居中的实现方法：显示：table\table-row\table-cell.html

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html CSS图片完美垂直居中的实现方法：显示：table\table-row\table-cell.html相关的知识，希望对你有一定的参考价值。

<style type="text/css">
    .container {
        width: 300px;
        height: 400px;
        margin: 50px auto;
        border: 1px solid #ccc;
        display: table;
    }

    .img {
        text-align: center;
        vertical-align: middle;
        display: table-cell;
    }

    img {
        width: 260px;
        height: 350px;
    }
</style>
<body>
    <div class="container">
        <div class="img">
            <img src="your_image.jpg">
        </div>
    </div>
</body>

以上是关于html CSS图片完美垂直居中的实现方法：显示：table\table-row\table-cell.html的主要内容，如果未能解决你的问题，请参考以下文章

转 Div+Css控制背景图片水平垂直居中显示背景铺满全屏