网页如何自适应居中(一招搞定网页元素居中问题)(1)

对于html的元素居中其实只有两类居中,一是块元素居中,二是内联元素居中。

内联元素居中使用text-align,块元素居中使用margin。

一、内联元素

内联元素居中,使用原则就是在其父元素上设置text-margin:center。

例如<span>元素居中

网页如何自适应居中(一招搞定网页元素居中问题)(2)

网页上显示效果为:

网页如何自适应居中(一招搞定网页元素居中问题)(3)

另外<a>标签也是一样

网页如何自适应居中(一招搞定网页元素居中问题)(4)

网页上显示效果为:

网页如何自适应居中(一招搞定网页元素居中问题)(5)

二、块元素

块元素居中,使用原则就是在需要居中的元素上设置margin:0 auto。

例如<div>元素居中

网页如何自适应居中(一招搞定网页元素居中问题)(6)

网页上显示效果为:

网页如何自适应居中(一招搞定网页元素居中问题)(7)

另外,如果块元素已经浮动(例如float:left)居中方法

例如已经浮动了的<div>元素

网页如何自适应居中(一招搞定网页元素居中问题)(8)

网页上显示效果为:

网页如何自适应居中(一招搞定网页元素居中问题)(9)

上面代码意义:

因为已经浮动了的缘故,所以采用margin:0 auto对元素已经不起作用了,所以采用position:relative,然后利用位 置top:50%与left:50%可以将元素居中,但是此时是以元素的左上角为参考点。

实际情况元素向右和向下平移了元素宽度与高度的一半,所以后面还需要加上margin:0 -50px(这个例子高度的一半为50px,以实际情况为准),如果垂直方向也要居中的话,就将0改为高度一半的相反数。

对前端感兴趣的小伙伴记得关注小编,每天都会更新前端的一些小技巧。没点赞的小伙伴记得点赞收藏哦,谢谢大家!

,