让盒子内的元素都居中显示

可以使用以下 CSS 样式让盒子内的元素都居中显示：

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

其中，`display: flex;` 表示将盒子设置为 flex 布局；`justify-content: center;` 表示水平方向居中对齐；`align-items: center;` 表示垂直方向居中对齐。

相关问题

盒子居中显示

要让一个盒子居中显示，可以使用以下的 CSS 代码：

.box {
  width: 200px; /* 设置盒子宽度 */
  height: 200px; /* 设置盒子高度 */
  position: absolute; /* 设置定位方式为绝对定位 */
  top: 50%; /* 把盒子顶部定位到父元素的中间位置 */
  left: 50%; /* 把盒子左侧定位到父元素的中间位置 */
  transform: translate(-50%, -50%); /* 使用 transform 属性把盒子向左上角移动一半的宽度和高度 */
}

其中，`top: 50%` 和 `left: 50%` 把盒子定位到了父元素的中间位置，而 `transform: translate(-50%, -50%)` 把盒子向左上角移动了一半的宽度和高度，从而使它在水平和垂直方向上都居中显示。

盒子横向居中显示

可以使用CSS中的flex布局来实现盒子横向居中显示。假设要居中显示的盒子的class为box，则可以在其父元素的CSS样式中设置如下属性：

display: flex;
justify-content: center;

其中，display: flex; 表示采用flex布局，justify-content: center; 表示在水平方向上居中对齐。这样设置后，盒子就可以横向居中显示了。