无法在页面上居中对齐两个 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 class（使用 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>

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

Unable to center align two divs on a page

html

css

center

alignment