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

Question

我在对齐页面中心的两个 div 时遇到一些困难。相反，它仍然保留。我浏览了这个网站和其他网站，并尝试了其中的一些建议。我在想，也许我把几个不同的例子放在一个例子中，把它放在一个例子上，搞砸了，有些东西否定了另一个例子？ div 只是没有在页面上居中对齐。我将 mask gif 放在一个 div 中，将文字放在另一个 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>