Flexbox:水平和垂直居中_jquery实现水平和垂直居中_使窗体水平和垂直居中 - 腾讯云开发者社区

基础概念

Flexbox（弹性盒子布局）是一种CSS布局模式，旨在提供一种更加灵活的方式来对容器中的子元素进行对齐、排序和分布。Flexbox通过将父容器设置为display: flex;来激活，从而使得子元素成为flex项。

优势

灵活性：Flexbox能够轻松地实现各种复杂的布局需求。
响应式设计：Flexbox布局能够很好地适应不同的屏幕尺寸和设备。
简化代码：相比传统的浮动和定位方法，Flexbox能够减少所需的CSS代码量。

类型

Flexbox布局主要涉及到两种类型的轴：

主轴（Main Axis）：默认情况下，主轴是水平方向，从左到右。
交叉轴（Cross Axis）：与主轴垂直的轴，默认情况下是垂直方向，从上到下。

应用场景

Flexbox广泛应用于网页布局中，如导航栏、表单、卡片布局等。

水平和垂直居中

在Flexbox中，可以通过以下属性实现水平和垂直居中：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Centering</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* 使容器高度占满整个视口 */
      border: 1px solid black;
    }
    .item {
      padding: 20px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Centered Content</div>
  </div>
</body>
</html>