justify-content: center; align-items: center;

这是CSS Flexbox布局中的两个属性，用于在容器中水平和垂直居中子元素。justify-content: center; 用于水平居中子元素，align-items: center; 用于垂直居中子元素。

例如，如果你有一个包含子元素的容器，并且希望子元素在容器中水平和垂直居中，则可以使用以下CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

这将使子元素在容器中水平和垂直居中。注意，这只适用于使用 Flexbox 布局的容器。

相关问题

align-items: center; justify-content: center;

align-items: center; 和 justify-content: center; 是CSS中用于布局的两个属性。

align-items: center; 用于垂直方向上对齐元素。当设置为center时，元素会在垂直方向上居中对齐。

justify-content: center; 用于水平方向上对齐元素。当设置为center时，元素会在水平方向上居中对齐。

这两个属性通常用于flex布局中，可以使元素在容器中居中对齐。

display: flex; justify-content: center;

`display: flex;` 是CSS Flexbox布局模式的关键属性，它将元素设置为弹性容器（flex container），允许子元素在其容器内灵活地排列。而 `justify-content: center;` 则用于对齐容器内的行或轴线（column）上的子元素。

当你在CSS中应用这两个属性时，会发生以下效果：

1. `display: flex;`：这会使容器变为弹性布局，其子元素可以水平或垂直地在容器内调整空间，而不会影响其他非弹性元素。

2. `justify-content: center;`：在水平方向上，这会将容器内的行居中对齐。如果子元素是行（如一个单行文本或行内元素），它们会水平居中。如果是多行元素，`center` 可能不会立即生效，除非配合其他属性（如 `align-items: center;` 或 `align-self: center;`）一起使用。

例如，在一个简单的HTML结构中：

<div class="flex-container">
  <div class="flex-item">Hello, Flex!</div>
</div>

与CSS:

.flex-container {
  display: flex;
  justify-content: center;
  height: 100px; /* 假设我们有一个固定高度 */
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  border-radius: 10px;
}

`.flex-item` 将在 `.flex-container` 的中心位置水平居中显示。