我不能让我的flexbox在css中用 "justify-content : center "将内容居中[重复] 。

Question

这个问题在这里已经有了答案:

在CSS Flexbox中，为什么没有 "justify-items "和 "justify-self "属性？ (5个答案)

Flexbox：水平和垂直居中。 (12个答案)

封闭 上月.

我想将我的网页居中，并将网页上的内容居中，但(css中的)justify content似乎不起作用。我已经尝试设置最大宽度的百分比和像素，并添加和删除页边距。我真的很感激所有的帮助！我有多个div元素在其他元素里面。

我有多个div元素在其他元素内，包括一个菜单，我想居中，甚至distrubetly菜单内的文本。然后，我有一个头有一个固定的大小，由于分辨率差。 我唯一能做到居中的方法是将margin设置为auto，但我相信这将覆盖flexbox系统。我也试过创建一个新的div，它包含了所有的东西(Innpakning1)，但这只给了我两个div，并没有达到我所期望的效果。

 <div class="innpakning1">

<div class="innpakning">


<div class="overskrift">
   <img src="media/header.png" id='overskrift' alt="">
</div>

<div class="meny">

  <div class="delmeny"> <a href="beisthjem.php" >Hjem</a> </div>
  <div class="delmeny"> <a href="beistallebeist.php"> Alle beist</a> </div>
  <div class="delmeny"> <a href="beistkategorier.php"> Kategorier </a> </div>

</div>

<div class="informasjon">

       <p> Scamander har som sitt oppdrag i livet å finne og katogerisere beist. Han ønsker å vise verden at de er mer fantastiske enn farlige,
 og har derfor laget denne siden som drives av en nonprofit organisasjon av samme navn som grunnleggeren. Her kan du kartelgge hvilke dyr som finens,
 og gitt at du er en sertifisert beistfinner, legge til dine egne funn.
 Vi gleder oss til å samarbeide med deg.
     </p>


     </div>

</div>

</div>

这是我的CSS。

body{
 display: flex;
 background-color: blue;
 width: 100%;
}
.innpakning1{
display: flex;
justify-content: center;
max-width: 800px;
margin-left: 15px;
}

.innpakning{

display: flex;
margin-left: 15px;
flex-direction: column;
background-color: red;
max-width: 400px;
justify-content: center;

}


.meny{
display: flex;
background-color: violet;
max-width: 200px;
justify-content: center;
margin-left: 15px;
}

.delmeny{
max-width: 200px;
 display: flex;
 margin-left: 15px;
}

#overskrift{
margin: auto;
   display: flex;
 height: 78px;
 width: 317px;
margin-left: 15px;
}

.informasjon{
background-color: aliceblue;
 display: flex;
 max-width: 200px;
 flex-direction: column;
 justify-content: center;
margin-left: 15px;

}

Answer 1

在 flex-direction: column 你应该设置 align-items: center 一切都要居中，加 justify-content: center 到 body 和 align-items: center 瓜分 .innpakning

Answer 2

使用下面的css，它将使所有的东西都处于中心位置。

body {
  display: flex;
  background-color: blue;
  width: 100%;
  margin: 0;
}
.innpakning1 {
  display: flex;
  justify-content: center;
  max-width: 800px;
  margin-left: 15px;
  margin: auto;
}

.innpakning {
  display: flex;
  margin-left: 15px;
  flex-direction: column;
  background-color: red;
  max-width: 400px;
  justify-content: center;
  align-items: center;
}

.meny {
  display: flex;
  background-color: violet;
  max-width: 200px;
  justify-content: center;
}

.delmeny {
  max-width: 200px;
  display: flex;
  margin-left: 15px;
}

#overskrift {
  margin: auto;
  display: flex;
  height: 78px;
  width: 317px;
}

.informasjon {
  background-color: aliceblue;
  display: flex;
  max-width: 200px;
  flex-direction: column;
  justify-content: center;
}