CSS是网页设计中非常重要的一部分,其中让图片在浏览器中央是一个非常常见的需求,下面介绍一下几种方法。//方法一:使用margin img { display: block; margin: auto
CSS是网页设计中非常重要的一部分,其中让图片在浏览器中央是一个非常常见的需求,下面介绍一下几种方法。
//方法一:使用margin img { display: block; margin: auto; } //方法二:使用flexbox .container { display: flex; justify-content: center; align-items: center; } .container img { display: block; } //方法三:使用绝对定位 .container { position: relative; } .container img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } //方法四:使用grid .container { display: grid; place-items: center; } .container img { display: block; }
以上这些方法实现的效果都是一样的,不同的是使用的技术不同,选择使用哪种方法可以根据实际情况来决定。
粉丝
0
关注
0
收藏
0