使用 CSS 让图片上下居中显示的方法有:使用 flexbox,设置父容器的 flex-direction 为 column、justify-content 和 align-items 均为 center。使用绝对定位,设置图片的 position 为 absolute,top 和 left 为 50%,并使用 transform 属性进行偏移。使用网格布局,设置父容器的 display 为 grid,并设置 place-items 为 center。使用 object-fit 属性,将图片的
如何使用 CSS 让图片上下居中显示
在 CSS 中,可以采用以下方法让图片上下居中显示:
方法一:使用 flexbox
<code class="css">.container { display: flex; flex-direction: column; justify-content: center; align-items: center; } img { height: 100px; }</code>
方法二:使用绝对定位
<code class="css">.container { position: relative; } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }</code>
方法三:使用网格布局
<code class="css">.container { display: grid; place-items: center; } img { height: 100px; }</code>
方法四:使用 object-fit 属性
<code class="css">img { object-fit: contain; }</code>
方法五:使用 padding
<code class="css">.container { padding: 20px 0; } img { height: 100px; }</code>
选择方法的建议:
以上是css怎么让图片上下居中显示的详细内容。更多信息请关注PHP中文网其他相关文章!