将我的项目置于屏幕中央

Question

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

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

最近，我刚刚尝试使用列，到目前为止我喜欢它。唯一的问题是它弄乱了我的导航栏，它实际上延伸到我的桌面，然后在 tablet/mobile.

中响应一次

还有一点，如下图所示，我希望我的文本框稍微居中一点，这样在桌面上看起来也不错。然后，一旦您将它缩小到 tablet/mobile，我希望我的个人资料图片堆叠在我的文本框顶部，这样当您滚动时它也看起来不错。

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

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

}

将我的项目置于屏幕中央

Centering my items in the middle of the screen

html

css

centering

responsive-design