使用flex实现元素水平垂直居中

最新推荐文章于 2023-08-30 09:58:02 发布

原创最新推荐文章于 2023-08-30 09:58:02 发布 · 979 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

本文详细介绍了如何使用CSS3的flexbox布局让元素在容器中实现水平和垂直居中对齐，包括单行和多行内容的情况。通过调整flex属性和align-items属性，可以轻松实现各种场景下的居中效果。

<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>