三种让DIV标签中的P标签水平和垂直都居中方法

要使DIV中的P标签水平和垂直居中，可以使用不同的CSS技术。以下是三种方法：

使用Flexbox布局：




div {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 200px; /* 设置高度 */
}

使用Grid布局：




div {
  display: grid;
  place-items: center; /* 水平垂直居中的简写 */
  height: 200px; /* 设置高度 */
}

使用绝对定位和transform：




div {
  position: relative;
  height: 200px; /* 设置高度 */
}
 
p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 向上、向左移动自身高度/宽度的一半 */
}

以下是HTML结构和CSS样式的结合示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered P Tag in Div</title>
<style>
  /* 方法1：Flexbox */
  .container-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border: 1px solid #000;
  }
 
  /* 方法2：Grid */
  .container-grid {
    display: grid;
    place-items: center;
    height: 200px;
    border: 1px solid #000;
  }
 
  /* 方法3：绝对定位和transform */
  .container-absolute {
    position: relative;
    height: 200px;
    border: 1px solid #000;
  }
  .container-absolute p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
</head>
<body>
 
<div class="container-flex">
  <p>Flexbox Method</p>
</div>
 
<div class="container-grid">
  <p>Grid Method</p>
</div>
 
<div class="container-absolute">
  <p>Absolute Positioning with Transform</p>
</div>
 
</body>
</html>

以上代码展示了三种不同的方法来使得DIV中的P标签水平和垂直居中，你可以根据自己的需求选择合适的方法。

三种让DIV标签中的P标签水平和垂直都居中方法

评论已关闭

推荐阅读