页面垂直居中实现方法（HTML/CSS）_网页垂直布局

作者：不正经 | 2024-06-11 10:08:50

踩

网页垂直布局

在网页设计中，垂直居中是一个常见的需求。本文将介绍几种常用的方法，以实现HTML/CSS中的页面垂直居中效果。

方法一：使用Flexbox布局

Flexbox是CSS3中引入的一种弹性盒子布局模型，它提供了简单而强大的方式来实现元素的居中对齐。下面是一个使用Flexbox布局实现页面垂直居中的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    body, html {
      height: 100%;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div>
    <!-- 这里是页面内容 -->
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在上面的代码中，我们将body和html元素的高度设置为100%，这是为了让页面占据整个视口的高度。然后，我们使用Flexbox布局模型将内容区域（<div>元素）在垂直方向上居中对齐。

方法二：使用绝对定位和负边距

另一种常用的方法是使用绝对定位和负边距来实现页面垂直居中。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    body, html {
      height: 100%;
      margin: 0;
      position: relative;
    }
    .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="centered">
    <!-- 这里是页面内容 -->
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在上面的代码中，我们将body和html元素的高度设置为100%，并将它们的定位设置为相对定位。然后，我们使用绝对定位将内容区域（<div>元素）放置在父元素的中间位置。通过设置top: 50%和left: 50%，我们将内容区域的左上角定位在父元素的中心点。最后，我们使用transform: translate(-50%, -50%)将内容区域向左上方移动自身宽度和高度的一半，以实现居中对齐。

方法三：使用表格布局

另一种方法是使用表格布局来实现页面的垂直居中。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    body, html {
      height: 100%;
      margin: 0;
      display: table;
      width: 100%;
    }
    .centered {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="centered">
    <!-- 这里是页面内容 -->
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在上面的代码中，我们将body和html元素的高度设置为100%，并将它们的显示属性设置为表格布局。然后，我们使用display: table-cell将内容区域（<div>元素）设置为表格单元格，并使用vertical-align: middle将内容垂直居中对齐。同时，我们还可以使用text-align: center将内容水平居中对齐。

这些方法中的任何一种都可以实现页面的垂直居中效果。您可以根据具体的需求和兼容性考虑选择其中的一种方法来实现您的网页布局。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/702716