在网页设计中,图片居中显示是很常见的需求,下面介绍一些CSS的技巧帮助实现图片在框的中间显示。/* 通过display:flex属性实现图片水平和垂直居中 */ .box { display: fle
在网页设计中,图片居中显示是很常见的需求,下面介绍一些CSS的技巧帮助实现图片在框的中间显示。
/* 通过display:flex属性实现图片水平和垂直居中 */ .box { display: flex; justify-content: center; align-items: center; } .box img { display: block; } /* 通过absolute和transform属性实现图片水平和垂直居中 */ .box { position: relative; } .box img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 通过text-align和line-height属性实现图片水平和垂直居中 */ .box { text-align: center; line-height: 200px; } .box img { vertical-align: middle; display: inline-block; }
上述CSS技巧可以根据实际情况选择其中的一种或多种来实现图片居中显示。
粉丝
0
关注
0
收藏
0