CSS3如何实现图片上下左右居中显示

时间：2024-04-17 15:29:20

我来更新啦~这么久没更新你以为我是去忙啦？错！跟着男朋友去浪啦~最近遇到个问题，就是关于一张图片的故事，这个故事差点导致我分手，想知道嘛？我也不买关子，这就告诉你们，您！听好嘞！竹柏这么一打呀，是别滴咱不夸。我夸一夸，这微信朋友圈的图呀。这个微信朋友圈的图，它究竟好在哪？它是你情敌，你前任、你家人的小圈咋！

 

　　　　　　事情是这么一回事儿，我和男票讨论微信朋友圈图片的实现，我男票问：“你说为啥它就能做到左右上下居中呢？那些图片的尺寸都不一样呀？”，说着他就拿起手机给我看。映入眼帘的是个胸大，腰细，肤白貌美的妹纸。三张图，三张都是把最美的位置显露出来，就像下面这样。主要是他还赞了，这就不一般了，男票独生子，没有姐妹啥的。如果是兄弟的朋友，他去赞肯定不太好吧。而且平时我发动态他从来不赞！结果只有一个，这！就是他的前任，我说：“你前任哇”他一脸惊恐，惊恐中带点故意掩埋的表情，说不是，是他妹妹。“分手”我扭过来继续写代码，后面大家都知道，在他各种甜言蜜语加金钱的诱惑上我原谅他了。并且，你们也知道，管他呢！前任再漂亮，在你眼前这个男的不还是你的狗嘛~哈哈哈~（比喻比喻哈，顺便摸摸自己比腰粗的腿....）

　　　　　　

 

　　　　那么日常生活中，我们在刷前女友朋友圈动态的时候，看到的一张张大小不一的照片居中显示在屏幕前。那么是什么让她越来越美呢？是你隔壁老王的照顾周全？还是她保养有方？或者她P的技术越来越好？都不是，是啥我也不知道。我只知道，居中显示是怎么实现出来的，那么~现在，就让我们上代码：

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.imgList{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.imgList li{
    width: 33%;
    position: relative;
}
.imgList li img{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform:translate(-50%,-50%);
}
</style>
</head>
<body>
    <ul class="imgList">
    <li>
        <img src="images/a.png" alt="">
    </li>
    <li>
        <img src="images/b.png" alt="">
    </li>
    <li>
        <img src="images/c.png" alt="">
    </li>
    </ul>
</body>
</html>
View Code

 

　　　　　　手动分割线

　　　　　　　　　　好啦，以上情节纯属虚构，主要是最近电影《前任3：再见前任》有点火嘛~过来蹭热度喽，下面就由我来粗略的解释下transform这个。transform呢是我们平时常用的css3样式，主要来实现一些简单的动画，或者延迟加载动作。transform它有几个属性值。最常用rotate()、skew()、scale()、translate()、等，分x、y轴。各位要看详细的教程可以去w3c 上看看，我这里就不多解释了。图片的父容器里设置好宽度和高度，那么图片一般显示都按左上角对齐方式，图片的尺寸不对呢，大小就不一。这是让视觉上看起来没有那么和谐。所以我们就运用translat这个属性来位移图片位置，让你前女友的胸放在最中间，让你这个手贱党忍不住去点开一看究竟，细细品味。

　　　　　　这次总结最主要还是遇到这种问题，赶项目进度时候真心不想再写一遍或者当时脑袋一蒙就是想不起来怎么实现的，别笑！肯定不止我一个人这样，所以写出来比较好。就先这样了，文采不好，不知道怎么写，大家就别多看文字了，直接看代码就可以了。文字留给我自己看~

 

相关文章