简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>居中无效</title>
<style>
.footer {
width: 100%;
color: #a1a1a1;
}
.footer p {
text-align: center;
}
</style>
</head>
<body>
<div class="footer">
<p>
©2021 xxx.com <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">粤ICP备88888888号</a>
</p>
</div>
</body>
</html>
该代码无论在电脑浏览器还是手机浏览器中正常显示
但实际项目中该元素的同级元素里面存在浮动的样式，即float ，在全屏的电脑浏览器中居中效果没问题，但是在手机浏览器查看，这个页面内容能自动缩放，但文字不是居中，会偏左
解决方案：
写死width的数值，示例中为width: 100%; ，根据页面内容宽度做了如下调整
width:1200px;
margin:0 auto;
text-align: center;
调整后再用手机浏览器查看，居中正常