居中对齐容器

Question

我正在尝试将 .container 对齐到页面的中心，现在它只在左侧。我试过“float:left”和“left:”，这些都对我没有任何好处。我正在寻找的是使 .container 在中心对齐的正确对齐标记。谢谢，薄荷

.container {
  background-color: lightgrey;
  padding: 1rem;
  border-radius: .5rem;
  width: 700px;
  max-width: 90%;
}

.quote-display {
  margin-bottom: 1rem;
  margin-left: calc(1rem + 2px);
  margin-right: calc(1rem + 2px);
}

.quote-input {
  background-color: transparent;
  border: 2px solid red;
  width: 100%;
  height: 8rem;
  margin: auto;
  resize: none;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .5rem;
}

.quote-input:focus {
  border-color: black;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">


<div class="main">
  <div id="title">
    <h1 style="margin: 0;">Typerore</h1>
  </div>
  <div class="timer" id="timer"></div>
  <div class="container">
    <div class="quote-display" id="quoteDisplay"></div>
    <textarea id="quoteInput" class="quote-input" autofocus></textarea>
  </div>
</div>

Answer 1

如果我是你，我会研究 Flexbox。解决您的问题的方法是在您的容器周围添加一个包装器并对其进行以下样式设置：

.wrapper { display: flex;
        justify-content:center;
}

可能是这样的：https://jsfiddle.net/s35x607o/1/

如需阅读更多精彩内容，请查看 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

居中对齐容器

Align Container In The Center

html

css

alignment