网页如何自适应居中（一招搞定网页元素居中问题）

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

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

一、内联元素

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

例如<span>元素居中

网页上显示效果为：

另外<a>标签也是一样

网页上显示效果为：

二、块元素

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

例如<div>元素居中

网页上显示效果为：

另外，如果块元素已经浮动（例如float:left）居中方法

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

网页上显示效果为：

上面代码意义：

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

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

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