1、首先,我们准备好对应的图片,当然这是依照设计图而来的,所以我们还需要一份让图片绝对居中的设计图,一个制作了部分的HTML页面
2、可以明显的看到这张图片是在这个DIV中水平方向上居中的。既是绝对割觏涩终居中就需要设定position属性,我们需要瓴烊椹舟将图片的position设为absolute,其父级元素的position设为relative。
3、这样设定之后,我们需要对图片的位置进行进一步的设定,思路是左右应该是占一半,我们设置left为50%即可。
4、高度应该是随意的,我们姑且将高度(top)设为0。
5、这样看似做好了,但是细心的朋友会发现,图片并没有水平居中,而是向右偏移了一些。
6、我们来重新考虑一下,所谓的水平居中指的应该是图片的中线和其父级元素的中线是重合的,我们设置left:50%,只是将图片的左端点和父级元素的中线对齐了,我们还需要为图片设定为图片宽度一般的外边距。
7、我们为图片设置margin-left为负的图片宽度的一半,这样图片会向左移动一半,我们的图片就绝对剧中个。