当前位置：个人在线分享 > 前端Vue日常工作中–元素居中
  • 文章介绍

    • 有疑问？请点击复制链接咨询！

    前端Vue日常工作中–元素居中

    在Vue中实现元素居中的方法非常多样，以下将介绍一些主要和常用的方法，包括CSS布局技巧和Element UI组件的结合使用。

    文章目录

    • 前端Vue日常工作中–元素居中
        • 1. Flex布局(除去框架外最常使用)
        • 2. Grid布局
        • 3. 绝对定位
        • 4. Element UI框架中el-row和el-col组合
        • 5. inline-block配合text-align: center
        • 6. 使用 margin: 0 auto 居中
        • 7. Margin负值
        • 8. 线性布局
        • 9. 表格布局
        • 10. 使用Element UI容器
        • 11.使用 calc() 函数居中

    1. Flex布局(除去框架外最常使用)

    Flex布局（也称为弹性布局）是一种用于设计和构建网页布局的CSS布局模型。它提供了一种更加高效、简便的方式来对容器内的子元素进行排列、对齐和分布。Flex布局适用于一维布局，主要用于在一条轴线上对子元素进行排列。

    <div class="flex-center">
  <el-button>按钮</el-button>
</div>

<style>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
</style>

    1. Flex容器（Flex Container）：

      • 通过将display属性设置为flex或inline-flex来创建Flex容器。
      • 例如：
        .flex-container {
  display: flex;
}

    2. Flex方向：

      • Flex容器默认沿主轴水平排列子元素。通过设置flex-direction属性，可以改变子元素的排列方向。
      • 可选值有：
        • row：水平方向（默认）
        • row-reverse：反向水平方向
        • column：垂直方向
        • column-reverse：反向垂直方向

    3. Flex Wrap：

      • 默认情况下，Flex容器内的子元素会挤在一行上。通过设置flex-wrap属性，可以控制子元素是否换行。
      • 可选值有：
        • nowrap：不换行（默认）
        • wrap：换行
        • wrap-reverse：反向换行

    4. Flex Flow：

      • flex-flow是flex-direction和flex-wrap两个属性的缩写。例如：
        .flex-container {
  flex-flow: row wrap;
}

    5. Flex子元素（Flex Items）：

      • Flex容器内的直接子元素被称为Flex子元素。
      • 默认情况下，它们将尽可能地占据容器的可用空间。

    6. Flex子元素的属性：

      • order： 定义子元素的排列顺序，值为整数。
      • flex-grow： 定义子元素的放大比例，决定剩余空间的分配。
      • flex-shrink： 定义子元素的收缩比例，决定缩小空间时的收缩程度。
      • flex-basis： 定义子元素在主轴上的初始大小。
      • flex： 是flex-grow、flex-shrink和flex-basis三个属性的缩写。

    7. 对齐（Alignment）：

      • justify-content： 在主轴上对齐子元素。
      • align-items： 在交叉轴上对齐子元素。
      • align-self： 为单个子元素覆盖align-items的值。

    8. Flex伸缩性：

      • Flex容器和Flex子元素都具有伸缩性，使得它们可以动态调整大小以适应不同的屏幕尺寸。

    2. Grid布局

    CSS Grid布局是一种用于网页布局的二维布局系统，允许开发者将页面划分为行和列，以便更灵活地控制元素的位置和大小。Grid布局提供了一种强大而直观的方式来设计复杂的网页布局。

    <div class="grid-center">
  <el-button>按钮</el-button>
</div>

<style>
.grid-center {
  display: grid;
  place-items: center;
  height: 100px;
}
</style>

    容器级属性（应用于Grid容器）

    1. display

      • grid: 使元素成为块级Grid容器。
      • inline-grid: 使元素成为行内Grid容器。

    2. grid-template-columns 和 grid-template-rows

      • 定义网格的列和行大小。可以使用像素（px）、百分比（%）、分数单位（fr）等指定大小。
      • 示例：grid-template-columns: 1fr 2fr 1fr; 定义了三列，第二列是第一和第三列宽度的两倍。

    3. grid-template-areas

      • 定义一个网格模板，通过引用网格区域的名称来创建布局。
      • 示例：grid-template-areas: "header header header" "sidebar main main" "footer footer footer";

    4. grid-column-gap, grid-row-gap

      • 定义行和列之间的间隔。
      • 示例：grid-column-gap: 20px; 设置列间隙为20像素。

    5. grid-gap

      • grid-gap是grid-row-gap和grid-column-gap的简写形式。
      • 示例：grid-gap: 10px 20px; 设置行间隙为10px，列间隙为20px。

    6. grid-auto-columns, grid-auto-rows

      • 设置隐式网格（自动创建的网格轨道）的大小。
      • 示例：grid-auto-rows: 100px; 自动创建的行高为100px。

    7. grid-auto-flow

      • 控制自动放置的项目是按行还是按列排列。
      • row, column, dense（尝试填充空白）。

    8. justify-items, align-items

      • 控制整个内容项在网格区域内的对齐方式。
      • start, end, center, stretch（默认，填满整个单元格）。

    9. justify-content, align-content

      • 控制整个网格在容器内的对齐方式。
      • start, end, center, stretch, space-around, space-between, space-evenly。

    子元素属性（应用于网格子项）

    1. grid-column-start, grid-column-end, grid-row-start, grid-row-end

      • 定位网格项在网格中的位置。
      • 可以使用数字来引用线号，或者使用span来表示跨越的轨道数量。

    2. grid-column, grid-row

      • grid-column和grid-row是上述属性的简写。
      • 示例：grid-column: 1 / 3; 表示项目从第1条垂直线开始，到第3条垂直线结束。

    3. grid-area

      • 用于将项目放在网格中的特定区域。
      • 可以是单独的grid-row-start/grid-column-start/grid-row-end/grid-column-end值的缩写，或者引用grid-template-areas定义的区域名称。

    4. justify-self, align-self

      • 控制单个项目在其网格区域内的对齐方式。
      • start, end, center, stretch。

    3. 绝对定位

    使用绝对定位和transform。

    <div class="absolute-center">
  <el-button>按钮</el-button>
</div>

<style>
.absolute-center {
  position: relative;
  height: 100px;
}
.absolute-center > * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

    4. Element UI框架中el-row和el-col组合

    使用el-row和el-col组合。

    <el-row type="flex" justify="center" align="middle">
  <el-col :span="4">
    <el-button>按钮</el-button>
  </el-col>
</el-row>

    5. inline-block配合text-align: center

    行内元素 水平居中

    <div class="margin-center">
  <el-button>按钮</el-button>
</div>

<style>
.margin-center {
  text-align: center;
}
.margin-center > * {
  display: inline-block;
}
</style>

    6. 使用 margin: 0 auto 居中

    要将块级元素水平居中，可以使用 margin 属性将左右边距设置为 auto。

    .container {
   width: 300px; /* 设置容器的宽度 */
   margin: 0 auto; /* 水平居中 */
}

    7. Margin负值

    利用margin负值和绝对定位。

    <div class="margin-negative-center">
  <el-button>按钮</el-button>
</div>

<style>
.margin-negative-center {
  position: relative;
  height: 100px;
}
.margin-negative-center > * {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px; /* Half of element's height */
  margin-left: -50px; /* Half of element's width */
}
</style>

    8. 线性布局

    使用line-height实现垂直居中。

    <div class="line-height-center">
  <el-button>按钮</el-button>
</div>

<style>
.line-height-center {
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>

    9. 表格布局

    使用table-cell和vertical-align。

    <div class="table-center">
  <el-button>按钮</el-button>
</div>

<style>
.table-center {
  display: table-cell;
  width: 100px;
  height: 100px;
  vertical-align: middle;
  text-align: center;
}
</style>

    1. table-layout：

      • 可选值：
        • auto：表格布局由内容决定。
        • fixed：表格布局使用固定的布局算法。

    2. width：

      • 可选值：
        • auto：默认值，表格的宽度由内容决定。
        • ：固定宽度，可以是像素（px）、百分比（%）等。
        • inherit：继承父元素的宽度。

    3. border-collapse：

      • 可选值：
        • separate：表格具有独立的边框模型。
        • collapse：相邻单元格的边框会合并。

    4. border-spacing：

      • 设置相邻单元格的边框间距。

    5. empty-cells：

      • 可选值：
        • show：显示空单元格的边框。
        • hide：隐藏空单元格的边框。

    6. caption-side：

      • 可选值：
        • top：默认值，标题在表格上方。
        • bottom：标题在表格下方。

    7. vertical-align：

      • 设置单元格中内容的垂直对齐方式。
      • 可选值：
        • baseline：基线对齐。
        • top：顶部对齐。
        • middle：中部对齐。
        • bottom：底部对齐。

    8. text-align：

      • 设置单元格中内容的水平对齐方式。
      • 可选值：
        • left：左对齐。
        • center：居中对齐。
        • right：右对齐。

    10. 使用Element UI容器

    利用Element UI的容器组件来居中。

    <el-container direction="vertical">
  <el-main class="center-main">
    <el-button>按钮</el-button>
  </el-main>
</el-container>

<style>
.center-main {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

    11.使用 calc() 函数居中

    对于水平居中，可以使用 calc() 函数结合百分比和像素值来计算元素的左右外边距。通过将50%（容器的一半宽度）减去150像素（元素宽度的一半）来计算得到。

    .container {
   width: 300px;
   margin-left: calc(50% - 150px);
   margin-right: calc(50% - 150px);
   /* background-color: blue; */
}

    对于垂直居中，可以使用 calc() 函数结合百分比、像素值和视口单位（如vh）来计算元素的上下外边距。通过将50vh（视口高度的一半）减去200像素（元素高度的一半）来计算得到的。

    .container {
   height: 400px;
   margin-top: calc(50vh - 200px);
   margin-bottom: calc(50vh - 200px);
}
    本站无任何商业行为
    个人在线分享 » 前端Vue日常工作中–元素居中
    admin

    admin 钻石

    分享到：

    相关推荐

    E-->