css上下左右居中

作者：蓝梦月影发布日期:2025-03-31 浏览:93

/* 使用 Flexbox 实现上下左右居中 */

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

.item {
  width: 100px;            /* 设置内容的宽度 */
  height: 100px;           /* 设置内容的高度 */
  background-color: lightblue; /* 设置背景颜色，方便查看效果 */
}

解释说明：

.container 是外层容器，使用了 display: flex 来启用 Flexbox 布局。
justify-content: center 使子元素在水平方向上居中。
align-items: center 使子元素在垂直方向上居中。
height: 100vh 设置容器的高度为视口高度的 100%，确保整个页面的高度都被利用。
.item 是需要居中的元素，设置了宽度和高度，并添加了背景色以便于观察居中效果。

这种方式是目前最常用且兼容性较好的方法之一。

上一篇：css自适应布局

下一篇：style.css