设置图片在div盒子里竖直方向上的居中

最新推荐文章于 2024-03-31 19:00:40 发布

想当年我年轻的时候

最新推荐文章于 2024-03-31 19:00:40 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_49237235/article/details/114395098

本文介绍三种在网页中使图片居中的方法：通过定位属性、使用Flex布局及利用display:table-cell属性。每种方法均附带示例代码，便于理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用定位居中

给包裹图片的div一个相对定位 position: relative;
给图片一个绝对定位 position: absolute; 并通过使用 top: 50%; transform: translateY(-50%); 来调节图片的位置，让图片展示在div盒子竖直边上的中间，即在竖直方向上居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用定位设置图片竖直方向上的居中</title>
    <style>
        .big{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: #3fec73;
        }
        img{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="big">
            <img src="./图片1.png" alt="">
    </div>
</body>
</html>

 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);

 可同时设置水平方向，垂直方向上的居中

2.使用flex布局

只需给父元素加上display:flex; align-items: center;即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用flex布局设置图片竖直方向上的居中</title>
    <style>
        .big{
            display: flex;
            align-items: center;
            width: 500px;
            height: 500px;
            background-color: #ee9b1f;
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="big">
            <img src="./1.png" alt="">
    </div>
</body>
</html>

    display: flex;
    align-items: center;
    justify-content: center;

* 在flex布局中，align-items 控制的是竖直方向上的位置
               justify-content 控制的是水平方向上的位置
* 以上写法可同时满足在水平，竖直方向上的居中

3.使用display:table,display:table-cell设置图片竖直方向上的居中

1.在父盒子上添加display:table;
2.在包裹图片的div盒子上添加display:table-cell;vertical-align: middle;即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用display:table实现图片垂直居中</title>
    <style>
        .big{
            display: table;/*此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符*/

            width: 500px;
            height: 500px;
            background-color: #000;/*背景颜色无效*/
        }
        .small{
            display: table-cell;/*子元素成为表格单元格（类似 <td> 和 <th>）*/
            vertical-align: middle;/*表格容器可以设置垂直对齐属性*/

            width: 150px;
            height: 150px;
            line-height: 150px;
            background-color: #e9e629;
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small">
            <img src="./1.png" alt="">
        </div>
    </div>
</body>
</html>

 - 设置了display：table-cell的元素：
	 1. 对宽度高度敏感
	 2. 对margin值无反应
	 3. 响应padding属性
	 4. 内容溢出时会自动撑开父元素

第三部分代码的注释参考该链接，有关display:table等可点击该链接查看