CSS3如何横向居中+纵向居中 in grid container

Posted 2022-02-26 Rudon滨海渔村

效果图

横向：三个子元素均匀分布  flex-direction: row; justify-content: space-between;
纵向：三个子元素垂直居中  align-items: center;

核心代码

	.heng 
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	
	.heng > view 
		display: flex;
		flex-direction: row;
		justify-content: center;
	
	.shu 
		align-items: center;
	

完整html.vue (in HBuilderX)

<template>
	<view>
		<view class="box">
			<view class="r-header-wrapper heng shu">
				<view class="rh-left">
					<view class="popupCityWrapper" v-show="showingCities">
						<view class="itemCity" v-for="(item, key) in cities" :key="key" @click="selectCity(item)">
							<text>item</text>
						</view>
					</view>
					<view class="rh-city-shower">
						city
					</view>
					<view class="rh-city-icon" @click="tCity">
						<uni-icons type="bottom" :size="20"></uni-icons>
					</view>
				</view>
				<view class="rh-center">
					<uni-easyinput  v-model="search" placeholder="输入搜索关键词" prefixIcon="search" />
				</view>
				<view class="rh-right" @click="goScan">
					<uni-icons type="scan"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default 
		data() 
			return 
				showingCities: false,
				search : "",
				cities: [
					"上海",
					"北京",
					"广州",
					"深圳"
				],
				city: ''
			
		,
		methods: 
			tCity (e) 
				this.showingCities = !this.showingCities
			,
			selectCity (e) 
				this.city = e;
				this.tCity()
			,
			goScan (e) 
				
			
		,
		onLoad () 
			this.city = this.cities[0]
		
	
</script>

<style>
	.box 
		background-color: white;
		padding: 15rpx;
		margin: 15rpx 25rpx;
		border-radius: 12rpx;
	
	
	.rh-left 
		width: 140rpx;
		display: flex;
		flex-direction: row;
		position: relative;
	
	
	
	.rh-right 
		width: 80rpx;
	
	
	.r-header-wrapper 
		height: 100rpx;
	
	
	.popupCityWrapper 
		position: absolute;
		top: 60rpx;
		left: 5rpx;
	
	
	.itemCity 
		padding: 15rpx 30rpx;
		border: #B1B5BC 1rpx solid;
		border-radius: 10rpx;
		background-color: white;
		cursor: pointer;
	
	
	.heng 
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	
	.heng > view 
		display: flex;
		flex-direction: row;
		justify-content: center;
	
	.shu 
		align-items: center;
	
	
	
	
	
</style>

试过不行的终极解决方案：不生效

.flexBoxWrapper 
    place-content: center;

试过这个修改方法也是不行：
css - place-content: center is not working as expected - Stack Overflowhttps://stackoverflow.com/questions/62837026/place-content-center-is-not-working-as-expected

对齐

网格布局中 justify-content align-content 和 place-content_陈开心的博客-CSDN博客_aligncontent和justifycontent有时，整个网格大小可能小于其 网格容器(grid container) 大小。 如果网格轨道（ grid tracks）使用固定的单位设置 大小（比如 px），就可能出现这种情况。在这种情况下，可以设置网格容器内的网格的对齐方式。Sometimes the edges of the grid do not correspond to the edges of the grid containe...https://blog.csdn.net/u013565133/article/details/102930246