css - 为什么这个元素在移动版本中没有出现在中心？html 或 css 有什么问题？

Question

我附上了电脑版和手机版的截图

我附上了 2 个不同的屏幕截图 - 一个桌面版和一个移动版 (iPhone 6)

如何使代码在所有设备上都相似？

为什么卡片没有出现在移动 View 的中心，我只是一个初学者，我正在尝试使用 Ionic、Angular、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>

请提出问题所在。我想要桌面和移动设备的单一解决方案

Answer 1

电话

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 文件中添加代码，但更改类名 要阅读有关媒体查询的更多信息，请查看 here和 here