图片水平居中、垂直居中、水平垂直居中

一、水平居中

1、方法一

将图片设置：

Display：block；

Margin：0 auto；

eg:

 

2、方法二

使用绝对定位：

eg：

为什么使用了定位，图片并没有水平居中？

居中的本质是图片的中线与父元素的中线重合，然而简单的使用left：50%，是“图片的左线”与“父元素的中线”进行重合。

要达到水平居中可以使用margin属性，将margin-left设置为负的图片宽度的一半。

二、垂直居中

使用定位：

eg:

为什么使用了定位，图片并没有垂直居中？

居中的本质是图片的中线与父元素的中线重合，然而简单的使用top：50%，是“图片的上线”与“父元素的中线”进行重合。

要达到水平居中可以使用margin属性，将margin-top设置为负的图片高度的一半。

三、水平垂直居中

使用定位：

 eg:

 

转载于:https://www.cnblogs.com/liuyaying/p/7287298.html