css3 display:flex；（flex布局）+img标签在div中水平垂直居中

最新推荐文章于 2024-09-14 13:04:57 发布

就像风1样

最新推荐文章于 2024-09-14 13:04:57 发布

阅读量2k

点赞数

分类专栏： css CSS样式专栏文章标签： flex img 垂直水平居中

本文链接：https://blog.csdn.net/qq_42221334/article/details/83858731

版权

本文介绍了如何使用CSS3的flex布局来让img标签在div中实现水平垂直居中，包括两种实现方式：一是结合text-align和vertical-align属性；二是通过设置img的绝对定位并配合transform进行平移。

摘要由CSDN通过智能技术生成

img标签在div中水平垂直居中--两种实现方式

第一种方式： text-align:center; vertical-align:middle;

复制代码

        div{
            text-align: center;
            vertical-align:middle;
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        img{vertical-align: middle}
        span{height: 100%;vertical-align: middle;display: inline-block}


<div style="">
    <span></span>
    <