img在div中垂直居中的方法

客官°小女子只卖身不卖艺 2022-12-18 10:59 107阅读 0赞

html中

<div>
        <img src="" />
    </div>

方法：

1.将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。

<style type="text/css">
    *{margin: 0;padding: 0;}
    div{
    width:150px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border:1px solid #000;
    }
    img {
    width: 50px;
    height: 50px;
    }
    </style>

2.通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
    width:150px;
    height: 100px;
    position: relative;
    border:1px solid #000;
    }
    img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px; /* 高度的一半 */
    margin-left: -25px; /* 宽度的一半 */
    }
    </style>

3.还是通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半，如果不知道元素的宽高，可以用transform: translate(-50%,-50%);《最好用！！！！！！！！！！》

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
    width:150px;
    height: 100px;
    position: relative;
    border:1px solid #000;
    }
    img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    }
    </style>

4.定位

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
    width:150px;
    height: 100px;
    position: relative;
    border:1px solid #000;
    }
    img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    }
    </style>

5.弹性布局

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
    width:150px;
    height: 100px;
    border:1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    img {
    width: 50px;
    height: 50px;
    }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读

相关 div垂直居中的几种方法

第一种 1. 父类 .father { height:100%; // height:100vh; width:100%;

小鱼儿/ 2023年03月03日 08:48/ 0 赞/ 198 阅读

相关 img在div中垂直居中的方法

html中 <div> <img src="" /> </div> 方法： 1.将display设置成table-cell，然后水平居中设

客官°小女子只卖身不卖艺/ 2022年12月18日 10:59/ 0 赞/ 108 阅读

相关 img在div中水平且垂直居中

一. 问题背景情况：`div`包着一个`img`，要使`img`水平且垂直居中二. 解决方案最最最关键：div中的`text-align:center;`是

川长思鸟来/ 2022年11月25日 13:23/ 0 赞/ 242 阅读

相关 css的div垂直居中的方法，百分比div垂直居中

前言我们都知道，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是

爱被打了一巴掌/ 2022年09月23日 15:48/ 0 赞/ 199 阅读

相关图片在div中垂直方向居中，垂直居中

原理：利用vertical-align实现垂直，决定行高的是行内最高的元素的值。 css 属性： div \{ height:600px; width:600px

港控/mmm°/ 2022年07月16日 01:46/ 0 赞/ 237 阅读

相关 img在div中垂直居中的代码

<div align="center" class="number" style="width:100%; height:100%;background-color:\333;

痛定思痛。/ 2022年06月16日 10:06/ 0 赞/ 153 阅读

相关 div盒子在页面中水平垂直居中的几种方法。

方法一：设置绝对定位absolute，然后margin为自动 <html lang="en"> <head> <meta charset=

谁借莪１个温暖的怀抱￠/ 2022年06月11日 06:43/ 0 赞/ 177 阅读

相关子div在父div中水平垂直居中的问题

总结： div如何在另一个div中水平垂直居中？ 1）利用父绝子相对，子div margin：auto；上下左右都为0

古城微笑少年丶/ 2022年05月09日 11:46/ 0 赞/ 247 阅读

相关 div水平垂直居中的方法

在平时，我们经常会遇到让一个div框针对某个模板上下左右都居中(水平垂直居中)，其实针对这种情况，我们有很多种方法实现。方法一：绝对定位法，不确定当前div

本是古典何须时尚/ 2021年07月25日 12:55/ 0 赞/ 506 阅读

相关 div盒子水平垂直居中的方法

<div class="wrapper"> 我不知道我的宽度和高是多少，我要实现水平垂直居中。 </div> 一、盒子没有固定的

╰半橙微兮°/ 2021年07月24日 11:26/ 0 赞/ 494 阅读