为什么这些元素在移动版本中不在中心位置？html或css中有什么错误？

我附上了桌面版和手机版的截图

我附上了两个不同的截图——一个桌面版和一个手机版（iPhone 6）

如何使代码在所有设备上工作相似

为什么这张卡没有出现在移动视图的中心，我只是一个初学者&我正在尝试使用离子、角度、HTML和CSS实现一个汽车预订应用程序

左边也浪费了一点空间-请参见屏幕截图

我的代码是

 <center>
    <div style="margin-top:80%;width:100%;position:absolute;" class="card">
    <div style="background-color:#002b45;height: 200px;" class="item item-avatar">

  <!-- <div align="center"> -->

   <div class="bottom" style="color: #b4ccda">
   <img style="height:60px;width:120px;border-radius:50%;" class="img_car"    src="assets/images/car1.png">
    <br>Honda City
    <br>HK 1234 5678

      </div>


        <br>
    <button style="width:250px;margin-top:-15px;" class="button button-    positive">
    Book Car
</button>
</div>
</center>

本田城

香港12345678


订车

---

请指出问题所在。我想要针对台式机和移动设备的单一解决方案

user-select: none;
    max-width: 3600px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)

width: auto;
    margin: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;

电话

桌面

编辑

-------------------------------------

两者皆有

width: auto;
    margin: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;

或使用媒体查询

@media screen and (min-width: 480px) {
    img{
       user-select: none;
       max-width: 3600px;
       margin: 0;
        position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%)
    }
}

@media screen and (max-width: 480px) {
    img{
       user-select: none;
       max-width: 3600px;
       margin: 0;
        position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%)
    }
}

是的，您可以在css文件中添加代码，但更改类名

---

要阅读有关第一个

div

上的媒体查询查找和的更多信息，请将其置于style:

左侧：0

像这样

<center>
    <div style="left: 0;margin-top:80%;width:100%;position:absolute;" class="card"> ... `

... `

发布一个最小的代码片段，再现问题。而且

标记已被弃用。我想要桌面版和移动版的单一解决方案。如何使用媒体查询？我可以在css文件中添加代码吗？