将我的项目置于屏幕中间答案

【问题标题】：Centering my items in the middle of the screen将我的项目置于屏幕中间
【发布时间】：2019-06-20 09:36:50
【问题描述】：

玩转 CSS 和 居中项目 可能是一项艰巨的任务。我在https://www.w3schools.com/ 和https://css-tricks.com/ 网站上四处寻找居中项目。如果你能帮助我实现我的目标，我仍然会感到困惑，就好像我在学习编码的同时为自己制作一个网站一样。我知道很多 HTML 和 CSS，但有时当您尝试实现您的设想时，会变得非常困难。

这是我的问题。我一直希望我的个人资料图片在左栏中，而关于我的摘要文字在右栏中。很多人一直告诉我要避免浮动，这样我就可以理解为什么并选择使用弹性、网格或列。

最近，我只是尝试使用列，到目前为止我喜欢它。唯一的问题是它弄乱了我的导航栏，该导航栏实际上横跨我的桌面，然后在平板电脑/移动设备上响应一次。

还有一件事，如下图所示，我希望我的文本框稍微居中一点，这样它在桌面上时看起来不错。然后，一旦您将其缩小到平板电脑/移动设备，我希望我的个人资料图片堆叠在我的文本框顶部，以便在您滚动时看起来也不错。

注意：我在两个对象周围加上了背景色，这样我就可以直观地看到它在哪里以及 div 框在做什么。然后我计划在完成后将其删除。

HTML

<span>
  <div class="summary">
    <div class="profilePicture" style="background-color: lightgreen;">
      <img src="https://i.imgur.com/TKo40kR.jpg" style="width: 170px; height: 170px; border-radius:50%;">
    </div>
    <div class="profileSummary" style="font-size: 18px; background-color: lightblue;">
      Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently and.
    </div>
  </div>
</span>

CSS

html, body {
  margin: 0;
}

body {
  display: table;
  width: 100%;
}

body>span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.summary {
                                    /* Creates two columns */
  -webkit-column-count: 2;          /* Chrome, Safari, Opera */
  -moz-column-count: 2;             /* Firefox */
  column-count: 2;
  margin: auto;                     /* Begin Centering */
  width: 60%;
  padding: 300px 0;
  text-align: center;
}

.profilePicture {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

【问题讨论】：

混乱来自body { display:table; }。让你这么做的人并不是你真正的朋友。有很多更好的方法来居中。如display: flex; align-items: center; justify-content: center。
@Andrei Gheorghiu 哈哈，解决了问题！不是我真正朋友的是 CSS-Tricks.com 关于居中的建议。现在我还有另一个问题。到目前为止看起来不错，但在 iPhone 中，它看起来很难看。看看这里i.imgur.com/r2T6Ihb.jpg
显然。不要使用列。使用 flexbox 并在窄设备上从行切换到列。我将添加一个示例。
好的，谢谢。期待一个例子。请务必将这两个项目也放在屏幕中间。

标签： html css responsive-design centering

【解决方案1】：

我建议不要使用columns，除非你想让你的元素很好……像报纸上的专栏一样显示。不仅您不能在 columns 中居中任何内容，而且在更改宽度时，孩子们会从一列跳到另一列，这使得用户很难跟踪正在发生的事情（如果阅读顺序对您的布局很重要）。

为了使任何内容在整个屏幕上居中，您可以使用以下方法：

.summary {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profilePicture {
  padding: 2rem;
}
.profileSummary {
  max-width: 400px;
}
@media(max-width: 667px) { /* change breakpoint to what you want */
  .summary {
    flex-direction: column;
  }
}

<div class="summary">
    <div class="profilePicture" style="background-color: lightgreen;">
      <img src="https://i.imgur.com/TKo40kR.jpg" style="width: 170px; height: 170px; border-radius:50%;">
    </div>
    <div class="profileSummary" style="font-size: 18px; background-color: lightblue;">
      Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently and.
    </div>
  </div>

如果您希望两个元素均匀分布，请使用 justify-content: space-evenly 而不是 justify-content: center。例如，使用限制宽屏幕宽度的包装器：

.summary {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  max-width: 992px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border: 1px solid red;
  flex-grow: 1;
}

.profilePicture, 
.profileSummary {
  padding: 2rem;
}
.profileSummary {
  max-width: 400px;
}
@media(max-width: 667px) { /* change breakpoint to what you want */
  .wrapper {
    flex-direction: column;
  }
}
body {margin: 0;}
* {box-sizing: border-box;}

<div class="summary">
  <div class="wrapper">
    <div class="profilePicture" style="background-color: lightgreen;">
      <img src="https://i.imgur.com/TKo40kR.jpg" style="width: 170px; height: 170px; border-radius:50%;">
    </div>
    <div class="profileSummary" style="font-size: 18px; background-color: lightblue;">
      Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently and.
    </div>
  </div>
</div>

【讨论】：

哈哈谢谢！你这个男人！你不会相信我花了多少次才最终得到如此简单的回复，而其他人却让它变得比我想要的复杂得多。我想要简短，简单，并且在瞬间完成！最后一个问题，如果你不介意的话。所以当我尝试 space-evenly 时，它似乎相距很远，如果我想让它接近 50% ish 怎么办？谢谢。
就像将它应用在中心和空间之间的某个位置 - 如果您知道我的意思，这样我就可以更满意我希望它在页面中的位置。
为了实现这一点，您需要在.summary 和您的元素之间再添加一个元素。您希望包装器以.summary 为中心，并有一个max-width 对您有意义（1000px？）。您将包装器放在摘要中，将两个元素放在包装器中。
另外仅供参考，我删除了背景颜色，现在看起来更好了。我把它放在那里，这样我就可以看到我的 div 框在“幕后”做了什么
我在答案中添加了一个使用包装器的示例。干杯！

【解决方案2】：

<div class="summary">
    <div class="profilePicture" style="background-color: lightgreen;">
      <img src="https://i.imgur.com/TKo40kR.jpg" style="width: 170px; height: 170px; border-radius:50%;">
    </div>
    <div class="profileSummary" style="font-size: 18px; background-color: lightblue;">
      Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently and.
    </div>
  </div>


.summary
{
  display:flex;
  justify-content:center;
 align-items: center;
 flex-flow:column;

}

【讨论】：