css弹性布局

作者：巅峰战犯发布日期:2025-03-02 浏览:70

/* 使用弹性布局（Flexbox）进行简单的水平和垂直居中示例 */

.container {
  display: flex; /* 将容器设置为弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue; /* 设置子元素的背景颜色 */
}

解释说明：

display: flex;：将父容器设置为弹性布局，使子元素可以按照弹性盒模型进行排列。
justify-content: center;：使子元素在主轴（默认是水平方向）上居中对齐。
align-items: center;：使子元素在交叉轴（垂直方向）上居中对齐。
height: 100vh;：设置容器的高度为视口高度的100%，确保容器占满整个屏幕高度。

上一篇：css图片居中