父元素内的子元素,在父里居中
.far {
// flex布局 子元素居中
display: flex;
justify-content: center; // 水平居中
align-items: center; // 垂直居中
}
1.在一个div下,有多个子div,且子div都是水平垂直居中
<template>
<div>
<div class="far">
<!-- 注意需要多包裹一层 -->
<div>
<div class="son1">
自定义长度
</div>
<div class="son2">
固定长度
</div>
<div class="son3">
<div class="son4">居中里的居中</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="less" scoped>
div {
text-align: center; // 这个很重要 ----------------
}
.far {
width: 400px;
height: 300px;
background-color: #98f3cd;
// flex布局 子元素居中
display: flex;
justify-content: center; // 水平居中
align-items: center; // 垂直居中
.son1 {
background-color: cyan;
// 如果需要自适应宽度和居中--打开这两行代码
width: fit-content;
margin: auto; // 解决自适应宽度的居中问题 --- 当前在父级居中
}
.son2 {
background-color: cyan;
width: 200px;
}
.son3{
width: 100px;
height: 160px;
background-color: cyan;
margin: auto; // 居中 --- 当前元素在父级居中
// flex布局 子元素居中
display: flex;
justify-content: center;
align-items: center;
.son4 {
background-color: pink;
width: 60px;
height: 60px;
}
}
}
</style>
2.
<template>
<div>
<div class="far">
<!-- 注意需要多包裹一层 -->
<div>
<div class="son1">1</div>
<div class="son2">22221</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="less" scoped>
div {
text-align: center;
}
.far {
width: 400px;
height: 300px;
background-color: #98f3cd;
// flex布局居中
display: flex;
justify-content: center;
align-items: center;
.son1{
background-color: cyan;
// 如果需要自适应宽度和居中--打开这两行代码
width: fit-content;
margin:auto; // 解决自适应宽度的居中问题
}
.son2{
background-color: cyan;
width: 200px;
}
}
</style>
2.横向居中(就少包裹一层div)
<template>
<div>
<div class="far">
<div class="son1">1</div>
<div class="son2">22221</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="less" scoped>
div {
text-align: center;
}
.far {
width: 400px;
height: 300px;
background-color: #98f3cd;
// flex布局居中
display: flex;
justify-content: center;
align-items: center;
.son1 {
background-color: cyan;
// 如果需要自适应宽度和居中--打开这两行代码
width: fit-content;
}
.son2 {
margin-left: 10px;
background-color: cyan;
width: 200px;
}
}
</style>
3.flex布局排序
<div>
<div>flex布局:内部使用float布局不生效,可以使用 order 属性排序</div>
<div class="far" style="display: flex;">
<div class="son on1" style="order: 1;">1</div>
<div class="son on2" style="order: 0;">2</div>
<div class="son on3" style="order: 2;">3</div>
</div>
</div>