使图片或一段文字在某个元素中垂直与水平居中的方法

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

今天在工作中受到同事的启发,将一副图片通过绝对定位的方式在页面中进行垂直与水平居中的定位。以前一直认为页面对象的高度是随着HTML文档元素的长度来增长的,若文档中只有一副图片,无法实现在页面中的垂直居中。

由于思维方代过于尊崇前端代码规范,一直都没有想到通过绝对定位的方式来实现单个元素在页面中的垂直居中。可能这也是告诉我们,某些创新的方法可能并不在规范之内。某些情况下需要我们打破这个代码书写规范才能开拓新的思维模式。当然,这里并不是鼓励大家不按照w3c代码书写规范来创建代码,我想说的是“至少在能够自然熟练的书写规范化代码再考虑这些偏门方法吧”。

单页面中实现图片或一段文字垂直与水平居中

实现方法:新建一个HTML页面,然后插入一个图片。通过绝对定位的方式将图片的位置定位到页面的正中间。如下面代码<img src="xxx" width="100" height="100" style="position:absolute; left:50%; top:50%;" />让绝对定位使用百分比的形式让元素可以自适应浏览器的高度与宽度,使任何情况下都能够实现居中。当然到这里还不算完,可能大家会发现元素并不是完全居中的,好像有点偏下和偏右。是的,这是由于left:50% 和 top:50% 是根据图片定点坐标计算的,如果需要将坐标定位到图片的中心点,我们需要减掉图片一般的高度与宽度。我们可以使用margin:-50px 0 0 -50px的负边距减掉这部分距离,因为margin和position可以同时调整元素的位置,因此才能够使图片能够完全居中,其实这里就是我刚才提到的,非规范化代码需要用到的地方。

如何使图片或一段文字在某个元素中垂直与水平居中

其实在table中可以使用表格自身的对齐属性,使表格内的内容进行垂直居中与水平居中,但是多数情况下,我们已经不采用table表格进行布局了。但是在css样式中,又没有特别有效,并且各浏览器通用的居中方式。

通过之前提到的在单页面中居中一个图片或一段文字的思路,我们大致已经知道是要通过positon进行定位调整。但是元素一旦使用position:absolute之后元素就不受父级元素的控制,独立定位于页面之上。因此为了使需要居中的元素不要脱离父级元素,我们需要为父级元素添加一个position:relative; 使其子级元素的绝对定位不会脱离父级元素的限制。

通过上面的样式组合,在元素内使用绝对定位就可以将需要垂直居中与水平居中的元素进行父级元素内部的定位了。

 


黑色块在灰色框中垂直与水平居中显示了
是不是很叼?


 

注意:使用上述定位方式请确定需要垂直居中与水平居中的元素不要超过父级元素或者页面,否则就失去垂直居中的意义了。(好吧,就当我说废话吧=。=)