CSS 图片居中的两种方法

CSS 布局中经常要用到图片的居中，但基于 CSS 的灵活性，图片居中有各种各样的方法。今天来介绍两种常用的方法：

第一种方法比较简单，利用文本居中属性来使图片居中。

<div>
      <img src="">
</div>

在 CSS 中设置 div { text-align:center;}

第二种方法有点麻烦，首先要为图片加上块父元素，如：

<p>
    <img src="">
</p>

将 <p> 的宽高设为图片的宽高， padding 设为 0 。接着将 <p> 的 margin-left 和 margin-right 的属性都设置为 auto 。第二种方法充分利用了块元素的性质，因为 <p> 是块元素，宽高的参数即为内容区的宽高。块元素会自动填满父元素，所以 <p> 的外边距会填满屏幕。如果左右外边距都设置为 auto ,则左右外边距相等，内容区自然居中。