css图片居中

最新推荐文章于 2024-04-19 05:10:43 发布

C_小笨笨

最新推荐文章于 2024-04-19 05:10:43 发布

阅读量7.2k

点赞数 4

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_45218136/article/details/126917372

版权

相信很多工程师都搜索过css图片居中的方法吧，但总是出现各种各样的问题。其实css图片居中分为很多种情况
第一种：已知父元素的高度，单独设置文字水平垂直居中，我们只需要设置css样式line-hight:同父元素高度，text-align:center即可。
在这里插入图片描述
第二种：让图片和文字水平垂直居中
给父元素设置line-hight样式和text-align:center，给img图片设置vertical-align:middle即可让图片和文字都水平垂直居中。

 .box {
            width: 300px;
            height: 300px;
            line-height: 300px;
            text-align: center; 
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .pic {
            width: 150px;
            height: 100px;
            vertical-align: middle;
        }

在这里插入图片描述
第三种设置图片水平垂直居中。可以设置图片为块样式，display:block，margin：0 auto。父元素设置padding值。

box {
            width: 300px;
            height: 300px;
            padding: 100px 0;---- //（父元素的高度-图片的高度）/ 2
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .pic {
            display: block;
            width: 150px;
            height: 100px;
            margin: 0 auto;
        }

在这里插入图片描述
第四种方法是用绝对定位和相对定位

.box {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .pic {
            position: absolute;
            left: 50%;top: 50%;
            transform: translate(-50%, -50%);
            width: 150px;
            height: 100px;
        }