如何用CSS实现图片在网页中水平垂直居中？

本文共计990个文字，预计阅读时间需要4分钟。

CSS图片居中的方法：

1.使用text-align: center;样式；

2.使用margin: 0 auto;样式；

3.使用弹性盒布局；

4.使用栅格布局；

5.使用绝对定位；

6.使用background属性，实现背景图。

CSS图片居中的方法：1、利用“text-align: center;”样式；2、利用“margin: 0 auto;”样式；3、利用弹性盒布局；4、利用栅格布局；5、利用绝对定位中对齐；6、利用background属性，实现背景图片居中。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

html

<div id="pic"> <img src=star.jpg class="logo"> </div>

一、（最简单）文本属性对齐text-align

text-align控制元素中文本行的对齐方式。可以在img设一个父辈的div，这样img就可以是div的文本，然后用text-align修改div属性。（在父辈元素添加属性）

注意：子元素必须是inline或inline-block；如果子元素也是div的话，需要给子元素设置display：inline/inline-block. 这里子元素img是inline所以省略这一步。该方法适用于inline元素上。