css div垂直居中

作者：冷言寡语发布日期:2026-06-03 浏览:86

<!DOCTYPE html>
<html>
<head>
<style>
/* 方法1：使用 Flexbox 布局 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 300px;           /* 设置容器高度 */
  border: 1px solid black; /* 可视化容器边界 */
}

/* 方法2：使用绝对定位和 transform */
.container2 {
  position: relative;
  height: 300px;
  border: 1px solid black;
}

.box2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>方法1：Flexbox 布局</h2>
<div class="container">
  <div class="box">垂直居中的内容</div>
</div>

<h2>方法2：绝对定位和 transform</h2>
<div class="container2">
  <div class="box2">垂直居中的内容</div>
</div>

</body>
</html>

解释说明：

方法1（Flexbox布局）：
- 使用 display: flex 将 .container 转换为弹性盒子容器。
- justify-content: center 实现水平居中，align-items: center 实现垂直居中。
- 这种方法简单且兼容性好，适用于现代浏览器。
方法2（绝对定位和 transform）：
- 使用 position: absolute 将 .box2 定位到父元素的中心位置。
- top: 50% 和 left: 50% 将元素的左上角移动到父元素的中心。
- transform: translate(-50%, -50%) 将元素自身向左和向上各移动其宽度和高度的一半，从而实现精确居中。
- 这种方法也适用于较老的浏览器。

上一篇：css clear

下一篇：css文字超出隐藏