一个高宽未知的图片如何在一个比他大的容器内水平垂直居中。

最新推荐文章于 2024-05-27 17:57:44 发布

LuckXinXin

最新推荐文章于 2024-05-27 17:57:44 发布

阅读量97

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/LuckXinXin/article/details/105239685

版权

CSS 专栏收录该内容

293 篇文章 3 订阅

订阅专栏

1）给父级的div设置固定的宽高；display:table-cell；vertical-align:middle;text-align:center;font-size:0

img设置：width:100%;height:100%;display:block

<!DOCTYPE html>
<html lang="zh">
 
    <head>
        <meta charset="UTF-8" />
        <title>CSS水平垂直居中实现方式--定位实现</title>
        <style type="text/css"> 
           .div1{
                background:#000080;
                display:table-cell;
                vertical-align: middle;
                text-align: center;
                width:200px;
                height:200px;
                /*解决高多出的3px*/
                font-size:0;
            } 
            .div1 img{
                width:100%;
                height: 100%;
                /*解决高多出的3px*/
                /*display: block;*/
            }     
        </style> 
    </head>
    <body> 
        <div class="div1 "> 
            <img src='1.png'>
        </div>
    </body>
</html>

LuckXinXin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个高宽未知的图片如何在一个比他大的容器内水平垂直居中。

1）给父级的div设置固定的宽高；display:table-cell；vertical-align:middle;text-align:center;font-size:0img设置：width:100%;height:100%;display:block<!DOCTYPE html><html lang="zh"> <head> ...
复制链接

扫一扫