当前位置:   article > 正文

前端Vue日常工作中--元素居中_vue居中显示

vue居中显示

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

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

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  1. Flex容器(Flex Container):

    • 通过将display属性设置为flexinline-flex来创建Flex容器。
    • 例如:
      .flex-container {
        display: flex;
      }
      
      • 1
      • 2
      • 3
  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-flowflex-directionflex-wrap两个属性的缩写。例如:
      .flex-container {
        flex-flow: row wrap;
      }
      
      • 1
      • 2
      • 3
  5. Flex子元素(Flex Items):

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

    • order 定义子元素的排列顺序,值为整数。
    • flex-grow 定义子元素的放大比例,决定剩余空间的分配。
    • flex-shrink 定义子元素的收缩比例,决定缩小空间时的收缩程度。
    • flex-basis 定义子元素在主轴上的初始大小。
    • flexflex-growflex-shrinkflex-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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

容器级属性(应用于Grid容器)

  1. display

    • grid: 使元素成为块级Grid容器。
    • inline-grid: 使元素成为行内Grid容器。
  2. grid-template-columnsgrid-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-gapgrid-row-gapgrid-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-columngrid-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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

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

使用el-rowel-col组合。

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

6. 使用 margin: 0 auto 居中

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

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  1. table-layout

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

    • 可选值:
      • auto:默认值,表格的宽度由内容决定。
      • <length>:固定宽度,可以是像素(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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

11.使用 calc() 函数居中

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

.container {
   width: 300px;
   margin-left: calc(50% - 150px);
   margin-right: calc(50% - 150px);
   /* background-color: blue; */
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

.container {
   height: 400px;
   margin-top: calc(50vh - 200px);
   margin-bottom: calc(50vh - 200px);
} 
  • 1
  • 2
  • 3
  • 4
  • 5
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/768600
推荐阅读
相关标签
  

闽ICP备14008679号