<template>
<view>
<view class="father">
<view class="son"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
.father{
width: 200rpx;
height: 200rpx;
background: #aaaaff;
//使用flex实现子元素水平垂直居中
//css3新版本用法
//display: flex;
//水平居中
//justify-content: center;
//垂直居中
//align-items: center;
//css3旧版本用法
display: -webkit-box;
//水平居中
-webkit-box-pack: center;
//垂直居中
-webkit-box-align: center;
.son{
width: 100rpx;
height: 100rpx;
background: #ff5500;
}
}
</style>
使用flex实现元素水平垂直居中
最新推荐文章于 2023-08-30 09:58:02 发布
本文详细介绍了如何使用CSS3的flexbox布局让元素在容器中实现水平和垂直居中对齐,包括单行和多行内容的情况。通过调整flex属性和align-items属性,可以轻松实现各种场景下的居中效果。
1069

被折叠的 条评论
为什么被折叠?



