如何实现 img 图片在div里的垂直居中

最新推荐文章于 2024-06-04 15:43:57 发布

Cici_jingjing

最新推荐文章于 2024-06-04 15:43:57 发布

阅读量4.9k

点赞数 1

本文链接：https://blog.csdn.net/qikule/article/details/83087729

版权

行内元素在父级元素中，垂直居中的实现方法：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <style>
    .logo{position:relative;height: 80px;width:200px;background: #ccc;}
    img{width:50px;height: 50px;
      position:absolute;
      top:50%; /*左上角向下移动到外面div的高度的一半*/
      transform:translateY(-50%);} /*图片整体再向上移动一半，以达到整体的垂直*/
      /*负数时：上左；正数时：下右*/
  </style>
</head>

<body>
  <div class="header">
        <div class="logo">
          <img src="./style/imgs/980.png" alt="">
        </div>
  </div>
</body>

</html>

效果如图：

同理，水平居中：先让图片的左上角通过left:50%;右移到水平方向的中心点，后通过transform:translateX(-50%);左移图片宽度的50%，以达到图片整体的水平居中。

效果如图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Cici_jingjing

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
如何实现 img 图片在div里的垂直居中

行内元素在父级元素中，垂直居中的实现方法：&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; .logo{position:relative;height: 80px;width:200px;background
复制链接

扫一扫