中心段，同时具有边距以创建空的空间

Question

所以，我想我的居中段落在页面的中间，同时创造一些左，右页边距“空的空间”。

我的目标是把它放在像样式文本框，并让它在页面的中心，同时建立在页面的左侧和右侧空列。我喜欢我在桌面模式，但它是“静止”，而不是回应。当调整在响应模式浏览器，它不留中心。下面是我想要达到如在我的下面速写和我的代码的例子。

目标：还当我调整我的浏览器到手机，我想要那个“文本框”开始填充边界，这样当你的手机或平板电脑上看起来可读。奖金：我想改变宽度或保证金大小的文本框的两侧，使它看起来不错，我认为我有我全HTML文档中的其他内容一起均匀。这只是我的HTML文档的一部分。

注意：当您运行的代码片段，我建议你点击到全页，这样就可以看到什么我谈论，使之更容易跟随。

.mainSummary {
  text-align: center;
  margin-left: 600px;
  margin-right: 600px;
}

<link rel="stylesheet" type="text/css" href="style.css">

<div class="mainSummary">
  <p style="background-color: lightblue; border: 2px solid lightgreen; border-radius: 10px; text-align: center; font-size: 22px;">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
    animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
    est, omnis dolor repellendus.
  </p>
</div>

Answer 1

的Flex +汽车利润率可以帮助实现自己的目标。

工作示例：https://codepen.io/cdtapay/pen/LqyaZx

.summary {
    display: flex;
}

.summary__content {
    padding: 1rem;
    background-color: lightblue; 
    border: 2px solid lightgreen; 
    border-radius: 10px; 
    text-align: center; 
    font-size: 22px;
    /* Set the desired max-width for mobile */
    max-width: 250px;
    margin: 0 auto;
 }

<div class="summary">
    <p class="summary__content">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 
      praesentium voluptatum deleniti atque corrupti quos dolores et quas 
      molestias excepturi sint occaecati cupiditate non provident, similique 
      sunt in culpa qui officia deserunt mollitia.
    </p>
</div>

Answer 2

试试这个代码：

.mainSummary {
    margin-left: 100%;
    margin-right: 100%;
}

要么

.mainSummary {
    margin-left: auto;
    margin-right: auto;
}

Answer 3

尝试这个。如果没有引导4然后弯曲将无法正常工作。因此，没有弹性，你可以试试这个。

.mainSummary {
  display:block;
  margin: 0 auto;
  text-align:center;
}