例如<span>元素居中网页上显示效果为：另外<a>标签也是一样网页上显示效果为：二、块元素块元素居中，使用原则就是在需要居中的元素上设置margin:0auto。实际情况元素向右和向下平移了元素宽度与高度的一半，所以后面还需要加上margin:0-50px，如果垂直方向也要居中的话，就将0改为高度一半的相反数。没点赞的小伙伴记得点赞收藏哦，谢谢大家！
对于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改为高度一半的相反数。
对前端感兴趣的小伙伴记得关注小编，每天都会更新前端的一些小技巧。没点赞的小伙伴记得点赞收藏哦，谢谢大家！
