html - 将我的元素置于屏幕中央

Question

尝试使用 CSS 和居中元素可能是一项艰巨的任务。我正在用 https://www.w3schools.com/ 环顾四周和 https://css-tricks.com/关于居中元素的网站。如果你能帮助我实现我的目标，我仍然感到困惑，就像我在学习编码的同时为自己制作一个网站一样。我知道很多 HTML 和 CSS，但有时当您尝试实现您的设想时，它会变得相当困难。

这是我的问题。我一直希望我的个人资料图片位于左栏，而关于我的摘要文本位于右栏。很多人一直告诉我要避免使用 float ，所以我可以理解其中的原因并选择使用 flex、grids 或 columns。

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

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

注意:我在我的两个对象周围放置了背景颜色，以便我可以直观地看到它在哪里以及 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;
}

Answer 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>