居中
容器宽高不固定，元素宽高不固定
absolute + margin + 上下左右:0
1
查看代码
vue
<template>
<div class="container">
<div class="child">1</div>
</div>
</template>
<style scoped lang="less">
.container {
position: relative;
height: 50px;
border: 1px solid red;
.child {
width: 20px;
height: 20px;
border: 1px solid blue;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
}
</style><template>
<div class="container">
<div class="child">1</div>
</div>
</template>
<style scoped lang="less">
.container {
position: relative;
height: 50px;
border: 1px solid red;
.child {
width: 20px;
height: 20px;
border: 1px solid blue;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
}
</style>relative + margin + transform
2
查看代码
vue
<template>
<div class="container">
<div class="child">2</div>
</div>
</template>
<style scoped lang="less">
.container {
position: relative;
height: 50px;
border: 1px solid red;
.child {
width: 20px;
height: 20px;
border: 1px solid blue;
position: relative;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
}
</style><template>
<div class="container">
<div class="child">2</div>
</div>
</template>
<style scoped lang="less">
.container {
position: relative;
height: 50px;
border: 1px solid red;
.child {
width: 20px;
height: 20px;
border: 1px solid blue;
position: relative;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
}
</style>relative + transform
3
查看代码
vue
<template>
<div class="container">
<div class="child">3</div>
</div>
</template>
<style scoped lang="less">
.container {
position: relative;
height: 50px;
border: 1px solid red;
.child {
width: 20px;
height: 20px;
border: 1px solid blue;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
</style><template>
<div class="container">
<div class="child">3</div>
</div>
</template>
<style scoped lang="less">
.container {
position: relative;
height: 50px;
border: 1px solid red;
.child {
width: 20px;
height: 20px;
border: 1px solid blue;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
</style>flex
4
查看代码
vue
<template>
<div class="container">
<div class="child">4</div>
</div>
</template>
<style scoped lang="less">
.container {
height: 50px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
.child {
width: 20px;
height: 20px;
border: 1px solid blue;
// align-self: center;
}
}
</style><template>
<div class="container">
<div class="child">4</div>
</div>
</template>
<style scoped lang="less">
.container {
height: 50px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
.child {
width: 20px;
height: 20px;
border: 1px solid blue;
// align-self: center;
}
}
</style>table-cell
5
查看代码
vue
<template>
<div class="table">
<div class="table-cell">
<div class="child">5</div>
</div>
</div>
</template>
<style scoped lang="less">
.table {
width: 100%;
height: 50px;
border: 1px solid red;
display: table;
.table-cell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid blue;
}
}
</style><template>
<div class="table">
<div class="table-cell">
<div class="child">5</div>
</div>
</div>
</template>
<style scoped lang="less">
.table {
width: 100%;
height: 50px;
border: 1px solid red;
display: table;
.table-cell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid blue;
}
}
</style>grid
6
查看代码
vue
<template>
<div class="container">
<div class="child">6</div>
</div>
</template>
<style scoped lang="less">
.container {
height: 50px;
border: 1px solid red;
display: grid;
place-items: center;
.child {
width: 20px;
height: 20px;
border: 1px solid blue;
}
}
</style><template>
<div class="container">
<div class="child">6</div>
</div>
</template>
<style scoped lang="less">
.container {
height: 50px;
border: 1px solid red;
display: grid;
place-items: center;
.child {
width: 20px;
height: 20px;
border: 1px solid blue;
}
}
</style>伪元素
7
查看代码
vue
<template>
<div class="container">
<div class="child">7</div>
</div>
</template>
<style scoped lang="less">
.container {
text-align: center;
width: 100%;
height: 100px;
border: 1px solid red;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.child {
width: 50px;
height: 50px;
border: 1px solid blue;
vertical-align: middle;
display: inline-block;
text-align: initial;
}
}
</style><template>
<div class="container">
<div class="child">7</div>
</div>
</template>
<style scoped lang="less">
.container {
text-align: center;
width: 100%;
height: 100px;
border: 1px solid red;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.child {
width: 50px;
height: 50px;
border: 1px solid blue;
vertical-align: middle;
display: inline-block;
text-align: initial;
}
}
</style>