html怎么让图片居中 各种方式总有适合你的

HTML 怎么让图片居中这个看似简单的问题，却有非常多的解决方案可以选择，下面 W3Cschool 小编会具体的和大家分享一下各种实现 HTML 图片居中的方法，希望能对各位有所帮助。

图片水平居中有两种常用方式：

1、使用​text-align: center​实现

<div style="text-align: center; width: 500px; ">
<img alt="w3cschool logo" src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" style="display: inline-block;" />
</div>

2、使用利用​margin: 0 auto​实现

<div style="text-align: center; width: 500px;">
<img alt="w3cschool logo" src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" style="margin: 0 auto;" />
</div>

图片水平居中有两种常用方式：

1、使用行高实现图片垂直居中

<div style="text-align: center; width: 500px;height:200px; line-height:200px; ">
   <img alt="w3cschool logo" src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" style="display: inline-block; vertical-align: middle;" />
</div>

2、使用绝对定位实现图片垂直居中

<div style="width: 500px;height:200px; position: relative;">
    <img alt="w3cschool logo" src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</div>

HTML 怎么让图片居中就为大家介绍到这里了，想要深入学习的朋友也可以到我们的HTML专区进行学习。