求助大佬,html手机访问和电脑访问显示的问题:

如下方代码,在电脑浏览器中及手机微信中都可在屏幕中水平居中显示,但是在手机UC浏览器中不行:

求教大佬是哪方面的问题呢,有没有什么避免的方法!


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="leichen.ltd">
  <title>测试标题</title>
 </head>
 <body style="text-align:center;">
<!--这部分手机UC访问出现问题-->
<h1>ddd</h1>
<h1>实战践行、开疆拓野</h1>
<h1>新世纪、新挑战、新未来</h1>
<!--这部分手机UC访问出现问题-->

 </body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="leichen.ltd">
  <title>测试标题</title>
</head>
<body>
<!--这部分手机UC访问出现问题-->
<h1  style="text-align:center;">ddd</h1>
<h1  style="text-align:center;">实战践行、开疆拓野</h1>
<h1 style="text-align:center;">新世纪、新挑战、新未来</h1>
<!--这部分手机UC访问出现问题-->

</body>
</html>

这样就好了,h1是块元素

试一下,我也很久没试过了 < meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

< meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />用这个方法

一个原因可能是 text-align: center; 样式 h1 没有继承下来。 可以新写一个 calss 来给每个 h1 ,参考代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="leichen.ltd">
  <title>测试标题</title>
    <style>
      .center {
        text-align:center;
        }
    </style>
 </head>
 <body>
<!--这部分手机UC访问出现问题-->
<h1 class="center">ddd</h1>
<h1 class="center">实战践行、开疆拓野</h1>
<h1 class="center">新世纪、新挑战、新未来</h1>
<!--这部分手机UC访问出现问题-->

 </body>
</html>