前端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>
Flex容器(Flex Container):
- 通过将
display
属性设置为flex
或inline-flex
来创建Flex容器。 - 例如:
.flex-container { display: flex; }
- 通过将
Flex方向:
- Flex容器默认沿主轴水平排列子元素。通过设置
flex-direction
属性,可以改变子元素的排列方向。 - 可选值有:
row
:水平方向(默认)row-reverse
:反向水平方向column
:垂直方向column-reverse
:反向垂直方向
- Flex容器默认沿主轴水平排列子元素。通过设置
Flex Wrap:
- 默认情况下,Flex容器内的子元素会挤在一行上。通过设置
flex-wrap
属性,可以控制子元素是否换行。 - 可选值有:
nowrap
:不换行(默认)wrap
:换行wrap-reverse
:反向换行
- 默认情况下,Flex容器内的子元素会挤在一行上。通过设置
Flex Flow:
flex-flow
是flex-direction
和flex-wrap
两个属性的缩写。例如:.flex-container { flex-flow: row wrap; }
Flex子元素(Flex Items):
- Flex容器内的直接子元素被称为Flex子元素。
- 默认情况下,它们将尽可能地占据容器的可用空间。
Flex子元素的属性:
order
: 定义子元素的排列顺序,值为整数。flex-grow
: 定义子元素的放大比例,决定剩余空间的分配。flex-shrink
: 定义子元素的收缩比例,决定缩小空间时的收缩程度。flex-basis
: 定义子元素在主轴上的初始大小。flex
: 是flex-grow
、flex-shrink
和flex-basis
三个属性的缩写。
对齐(Alignment):
justify-content
: 在主轴上对齐子元素。align-items
: 在交叉轴上对齐子元素。align-self
: 为单个子元素覆盖align-items
的值。
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容器)
display
grid
: 使元素成为块级Grid容器。inline-grid
: 使元素成为行内Grid容器。
grid-template-columns 和 grid-template-rows
- 定义网格的列和行大小。可以使用像素(px)、百分比(%)、分数单位(fr)等指定大小。
- 示例:
grid-template-columns: 1fr 2fr 1fr;
定义了三列,第二列是第一和第三列宽度的两倍。
grid-template-areas
- 定义一个网格模板,通过引用网格区域的名称来创建布局。
- 示例:
grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
grid-column-gap, grid-row-gap
- 定义行和列之间的间隔。
- 示例:
grid-column-gap: 20px;
设置列间隙为20像素。
grid-gap
grid-gap
是grid-row-gap
和grid-column-gap
的简写形式。- 示例:
grid-gap: 10px 20px;
设置行间隙为10px,列间隙为20px。
grid-auto-columns, grid-auto-rows
- 设置隐式网格(自动创建的网格轨道)的大小。
- 示例:
grid-auto-rows: 100px;
自动创建的行高为100px。
grid-auto-flow
- 控制自动放置的项目是按行还是按列排列。
row
,column
,dense
(尝试填充空白)。
justify-items, align-items
- 控制整个内容项在网格区域内的对齐方式。
start
,end
,center
,stretch
(默认,填满整个单元格)。
justify-content, align-content
- 控制整个网格在容器内的对齐方式。
start
,end
,center
,stretch
,space-around
,space-between
,space-evenly
。
子元素属性(应用于网格子项)
grid-column-start, grid-column-end, grid-row-start, grid-row-end
- 定位网格项在网格中的位置。
- 可以使用数字来引用线号,或者使用
span
来表示跨越的轨道数量。
grid-column, grid-row
grid-column
和grid-row
是上述属性的简写。- 示例:
grid-column: 1 / 3;
表示项目从第1条垂直线开始,到第3条垂直线结束。
grid-area
- 用于将项目放在网格中的特定区域。
- 可以是单独的
grid-row-start
/grid-column-start
/grid-row-end
/grid-column-end
值的缩写,或者引用grid-template-areas
定义的区域名称。
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>
table-layout
:- 可选值:
auto
:表格布局由内容决定。fixed
:表格布局使用固定的布局算法。
- 可选值:
width
:- 可选值:
auto
:默认值,表格的宽度由内容决定。<length>
:固定宽度,可以是像素(px)、百分比(%)等。inherit
:继承父元素的宽度。
- 可选值:
border-collapse
:- 可选值:
separate
:表格具有独立的边框模型。collapse
:相邻单元格的边框会合并。
- 可选值:
border-spacing
:- 设置相邻单元格的边框间距。
empty-cells
:- 可选值:
show
:显示空单元格的边框。hide
:隐藏空单元格的边框。
- 可选值:
caption-side
:- 可选值:
top
:默认值,标题在表格上方。bottom
:标题在表格下方。
- 可选值:
vertical-align
:- 设置单元格中内容的垂直对齐方式。
- 可选值:
baseline
:基线对齐。top
:顶部对齐。middle
:中部对齐。bottom
:底部对齐。
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); }