持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

常用居中方式

水平居中

方案1

父元素设置text-align 值为 center 子元素设置为 display: inline-block。

实现如下

		<view class="v-parent">
			<view class="v-child">
				子容器
			</view>
		</view>
                
               .v-parent{
		width: 400rpx;
		height: 400rpx;
		background-color: green;
		text-align: center;
		.v-child{
			width: 200rpx;
			height: 200rpx;
			background-color: red;
			display: inline-block;
		}
	}

可以看到父容器用了text-align: center;子容器用了display: inline-block;，得到的效果如下图， 可以看到是水平居中的。

方案2

父元素不需要额外设置，子元素设置为 table（或者block）+margin 配合可以做到。

	.v-parent{
		width: 400rpx;
		height: 400rpx;
		background-color: green;
		// text-align: center;
		.v-child{
			width: 200rpx;
			height: 200rpx;
			background-color: red;
			display: table;
			margin: 0 auto;
		}
	}

方案3

父元素设置position: relative;子元素设置position: absolute;+transform 属性可以做到。

实现如下

这种方式也比较常用。

垂直居中

方案1

父元素设置 display:table-cell;vertical-align: middle;2个属性，子元素不用额外设置。 实现如下

也比较轻松做到垂直居中。

方案2

这种方式跟水平居中的 absolute+transform 属性配合类似，如下实现

	.v-parent{
		width: 400rpx;
		height: 400rpx;
		background-color: green;		
		position: relative;
		   display: table-cell;
		   vertical-align: middle;
		.v-child{
			width: 200rpx;
			height: 200rpx;
			background-color: red;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}

水平垂直居中

方案1

就是水平居中和垂直居中的布局样式写在一起。

	.v-parent{
		width: 400rpx;
		height: 400rpx;
		background-color: green;		
	
		   display: table-cell;
		   vertical-align: middle;
		.v-child{
			width: 200rpx;
			height: 200rpx;
			background-color: red;
			
			 display: block; 
			margin: 0 auto;
		
		}
	}

方案2

利用absolute+transform结合实现

	.v-parent{
		width: 400rpx;
		height: 400rpx;
		background-color: green;		
		position: relative;
		.v-child{
			width: 200rpx;
			height: 200rpx;
			background-color: red;
			position: absolute;∂
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		
		}
	}

方案3

flex方式实现。

	.v-parent{
		width: 400rpx;
		height: 400rpx;
		background-color: green;		
		display: flex;
		justify-content: center;
		align-items: center;
		.v-child{
			width: 200rpx;
			height: 200rpx;
			background-color: red;
		
		}
	}

flex方式实现是最简单的，同时flex也可以直接单独实现水平居中，或者垂直居中。每种方式都有对应的优缺点，具体根据自己的开发效果和兼容性来选择对应的就好。

文字换行

如果设置超出指定行数则省略

		.v-child{
			width: 200rpx;
			height: 200rpx;
			background-color: red;
			text{
				overflow: hidden;				
				text-overflow: ellipsis;				
				display: -webkit-box;				
				-webkit-line-clamp: 2;				
				-webkit-box-orient: vertical;
			}			 
		}

这种方式适合绝大多数webkit 内核浏览器。

总结

前端工程师在平时开发中，我觉得布局居中效果用的是非常多的，看过这么多网页、应用肯定都会存在，因此掌握常用的布局居中方式对我们的开发很有用处。