集中 div css (1) - 芒果文档

📌 相关文章

📜 集中 div css (1)

📅 最后修改于: 2023-12-03 15:42:25.409000 🧑 作者: Mango

集中 div css

简介

集中 div css 是一种通过居中和对齐 div 元素的方式来实现网页布局的技巧。通过使用该技巧，可以轻松地实现屏幕宽度自适应、响应式布局和网页元素水平或垂直居中等效果。

实现方式

居中 div 元素

水平居中

.container {
  display: flex;
  justify-content: center;
}

其中，将容器 div 的 display 属性设置为 flex 后，通过 justify-content 属性使得容器内的元素水平居中。

垂直居中

.container {
  display: flex;
  align-items: center;
}

与水平居中同理，将容器 div 的 display 属性设置为 flex 后，通过 align-items 属性使得容器内的元素垂直居中。

集中所有 div 元素

水平集中

body {
  display: flex;
  justify-content: center;
}

将 html 的 body 元素的 display 属性设置为 flex 后，通过 justify-content 属性使得所有 div 元素水平集中。

垂直集中

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

.container {
  margin: auto;
}

将 html 的 body 元素的 display 属性设置为 flex，并将其 flex-direction 属性设置为 column，使得所有 div 元素垂直集中。同时，将 height 属性设置为 100vh （即视图高度），将容器 div 的 margin 属性设置为 auto，使其水平居中。

应用实例

通过集中 div css 技巧，可以轻松实现响应式、自适应的网页布局，以及元素的水平或垂直居中等效果。下面是一个示例：

<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>

<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 80%;
    border: 1px solid #000;
  }

  .box {
    width: 50%;
    height: 50%;
    background: red;
  }
</style>

通过以上代码，将容器 div 和内部元素 div 都设置为 flex 容器，使得两者均已水平和垂直居中。同时，容器 div 的宽高均为 80%，可实现自适应网页布局。内部元素的宽高均为 50%，可实现内部元素水平和垂直居中。上述代码和效果展示如下：

<style>
  // 省略其余样式

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 80%;
    border: 1px solid #000;
  }

  .box {
    width: 50%;
    height: 50%;
    background: red;
  }
</style>

preview