在屏幕中间居中放置我的项目

Question

使用CSS和居中项可能会有些艰巨。我在https://www.w3schools.com/和https://css-tricks.com/网站上浏览有关居中项的信息。如果您可以帮助我实现自己的目标，就像我在学习编码的同时为自己创建一个网站，我仍然感到困惑。我知道很多HTML和CSS，但是有时候当您尝试实现自己的预期时，会变得非常困难。

这是我的问题。我一直希望个人资料图片在左列，而关于我的摘要文本在右列。很多人告诉我要避免使用浮点数，以便我能理解原因并选择使用flex，grid或column。

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

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

注意：我在两个对象周围放置了背景色，以便可以直观地看到它在哪里以及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: center而不是justify-content: space-evenly。例如，使用包装器限制了更宽屏幕上的宽度：

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

}