在一个div下，有多个子div，且子div都是水平垂直居中
文章来源：https://www.toymoban.com/news/detail-724178.html
<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>
横向居中（就少包裹一层div）文章来源地址https://www.toymoban.com/news/detail-724178.html
<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>
到了这里，关于多个子div在父中垂直居中的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
