css问题记录

最新推荐文章于 2022-03-23 21:58:55 发布

叶常落

最新推荐文章于 2022-03-23 21:58:55 发布

阅读量719

点赞数

CC 4.0 BY-SA版权

分类专栏： frontend

本文链接：https://blog.youkuaiyun.com/lineuman/article/details/83796007

frontend 专栏收录该内容

80 篇文章

订阅专栏

本文介绍了一种使用CSS实现图片在div容器中垂直居中的方法。通过设置图片的position为relative，top为50%，并使用transform:translate(0,-50%)使图片在其容器内精确居中。此外，还设置了图片的圆角、宽度等样式。

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

img在div中垂直方向居中？
这句话通俗来说是让图片的中心放在垂直方向的中心上

<div>
<img src="foo.png"/>
</dvi>
<style>
img{
        position: relative;
        top: 50%;   //高度是50%，此时图片的中心肯定在50%的下面，所以要transform
        transform: translate(0,-50%); //以图片自身的宽度，高度作为参考进行移动，因为高度50%的时候是图片的上部在50%，所以要把图片往上移动图片的50%，这个图片才会居中显示。
        border-radius: 50%;
        width: 10rem;
    }
</style>