CSS未居中

由 发布于

我可能会在这里烤，但我已将Photoshop图层导出到CSS，UI看起来正确，但全部居中于左侧。我已经尝试了所有我知道的内容，但似乎没有任何内容居中。我希望UI能够响应，这对我来说是一个挑战。我已将其设置为默认值。

HTML：

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

       <div class="background"></div>
       <div class="backgroundFiller"></div>
       <div class="gameBackground"></div>
       <div class="buttonRight"></div>
       <div class="buttonMiddle"></div>
       <div class="buttonLeft"></div>
       <div class="screen"></div>
       <div class="rep"></div>

    </body>

    </html>

CSS：

.rep {
    background-image: url("rep.png");
    position: absolute;
    left: 98px;
    top: 403px;
    width: 238px;
    height: 24px;
    z-index: 8;
  }



  .buttonLeft {
    background-image: url("buttonLeft.png");
    position: absolute;
    left: 98px;
    top: 496px;
    width: 213px;
    height: 64px;
    z-index: 5;
  }


  .buttonMiddle {
    background-image: url("buttonMiddle.png");
    position: absolute;
    left: 405px;
    top: 496px;
    width: 213px;
    height: 64px;
    z-index: 6;
  }



  .buttonRight {
    background-image: url("buttonRight.png");
    position: absolute;
    left: 712px;
    top: 496px;
    width: 213px;
    height: 64px;
    z-index: 7;
  }

  .screen {
    background-image: url("screen.png");
    position: absolute;
    left: 98px;
    top: 119px;
    width: 827px;
    height: 264px;
    z-index: 4;
  }


  .gameBackground {
    background-image: url("gameBackground.png");
    position: absolute;
    left: 68px;
    top: 96px;
    width: 886px;
    height: 573px;
    z-index: 3;
  }

  .backgroundFiller {
    background-image: url("backgroundFiller.png");
    position: absolute;
    left: 39px;
    top: 51px;
    width: 946px;
    height: 666px;
    z-index: 2;
  }

  .background {
    background-image: url("Background.png");
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1024px;
    height: 768px;
    z-index: 1;
  }