无法居中对齐两个div在页面上

Question

我在对齐页面中心的两个div时遇到一些困难。相反，它仍然保留。我已经浏览了该网站和其他网站，并尝试了一些建议。我在想，也许我已经从几个不同的例子中拿出了一个例子，却把另一个例子否定了，这使我感到困惑。 div不在页面上居中。我在一个div中有遮罩gif，在另一个div中有书写，并将这两个div放在容器中。

body {
  background-color: #000;
  color: white;
  font-family: "Cutive One", monospace;
  font-size: 13px;
  text-align: justify;
  line-height: 1.5;
}

.container {
  margin: 70px;
  width: auto;
}

.one {
  width: 35%;
  max-width: 300px;
  min-width: 300px;
  padding: 5px;
  text-align: center;
  float: left;
}

.two {
  width: 35%;
  padding: 5%;
  max-width: 300px;
  min-width: 300px;
  float: left;
  background: black;
  font-family: "Cutive One", monospace;
  font-size: 13px;
  text-align: justify;
  line-height: 1.5;
}

.gif {
  background: url("http://78.media.tumblr.com/072a9aee9e56415e20ffd06c3260c49d/tumblr_n85ga7OASY1qmxnvuo2_500.gif") repeat;
  background-position: 10px;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 200px;
  font-family: Fjalla One;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3;
  background-position-x: 50%;
  background-position-y: 50%;
}

<div class="container">
  <div class="one">
    <div class="gif">TXT</div>
  </div>

  <div class="two">
    <h3>Test //</h3>

    <ul>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
</div>

Answer 1

像这样更改您的container类（使用Flex）：

.container {

      display: flex;
      justify-content: center;
      align-items: center; 
    }

body {
  background-color: #000;
  color: white;
  font-family: "Cutive One", monospace;
  font-size: 13px;
  text-align: justify;
  line-height: 1.5;
}

.container {
  
  display: flex;
  justify-content: center;
  align-items: center; 
}

.one {
  width: 35%;
  max-width: 300px;
  min-width: 300px;
  padding: 5px;
  text-align: center;
  float: left;
}

.two {
  width: 35%;
  padding: 5%;
  max-width: 300px;
  min-width: 300px;
  float: left;
  background: black;
  font-family: "Cutive One", monospace;
  font-size: 13px;
  text-align: justify;
  line-height: 1.5;
}

.gif {
  background: url("http://78.media.tumblr.com/072a9aee9e56415e20ffd06c3260c49d/tumblr_n85ga7OASY1qmxnvuo2_500.gif") repeat;
  background-position: 10px;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 200px;
  font-family: Fjalla One;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3;
  background-position-x: 50%;
  background-position-y: 50%;
}

<div class="container">
  <div class="one">
    <div class="gif">TXT</div>
  </div>

  <div class="two">
    <h3>Test //</h3>

    <ul>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
</div>