我错过了啥？ Flexbox 不在此代码段中将容器居中 [重复]

Posted 2023-03-29

【中文标题】我错过了啥？ Flexbox 不在此代码段中将容器居中 [重复]

【英文标题】：What am I missing? Flexbox doesn't center the container in this snippet here [duplicate]我错过了什么？ Flexbox 不在此代码段中将容器居中 [重复]

【发布时间】：2021-08-18 04:06:49

【问题描述】：

我正在尝试使容器居中，但我不知道为什么它不起作用。

html,
body 
  height: 100%


.container 
  min-height: 20em;
  width: fit-content;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

【参考方案1】：

Flexbox 仅将其内容居中。 换句话说，将 flexbox 添加到容器中会使容器内的所有内容居中。

要修复它，请将 flexbox 添加到正文中：

html, body 
   height:100vh;
   margin:0;

body 
   display: flex;
   align-items: center;
   justify-content: center;


.container
   min-height:20em;
   width: fit-content; 
   background-color:#ffffff;

【讨论】：

谢谢！它奏效了。

【参考方案2】：

试试这个！！！

*
  margin: 0;
  padding: 0;

.parent
  width: 100vw;
  height: 100vh;
  background: grey;
  display: grid;
  place-content: center;

.child
  background: blue;
  width: 10vw;
  height: 10vh;

<div class="parent">
  <div class="child"></div>
</div>