无法在页面上居中对齐两个 div [重复]答案

【问题标题】：Unable to center align two divs on a page [duplicate]无法在页面上居中对齐两个 div [重复]
【发布时间】：2018-12-02 01:45:57
【问题描述】：

我在对齐页面中心的两个 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>

【问题讨论】：

不知道您为什么接受下面的答案-似乎没有将您的容器居中，无论如何这是我的答案-由于问题已关闭而无法发布：@ 987654321@ js 框是我的介绍段落说明我做了什么
嗨，@Pete，对不起，我对编码和这个网站还是很陌生。我的问题被标记为重复，所以我想如果给我的东西能够解决我的问题，我会标记它，这样我就不会阻塞提要。我尝试了 billy.farrol 给出的代码，但它解决了我的问题。非常感谢您抽出宝贵的时间来回答，并提供洞察力。我现在正在处理你的问题。

标签： html css alignment center

【解决方案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>

【讨论】：