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

一、水平居中

1、方法一

将图片设置:

Display:block;

Margin:0 auto;

eg:

 

2、方法二

使用绝对定位:

eg:

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

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

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

二、垂直居中

使用定位:

eg:

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

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

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

三、水平垂直居中

使用定位:

 eg:

 

posted @ 2017-08-04 21:55  微光流萤  阅读(377)  评论(0编辑  收藏  举报