[分享]css3控件垂直居中显示

CSS3控件垂直居中对于很多网页设计者来说是一个十分棘手的问题。实际上，控件垂直居中的方法和技巧也是多种多样的。下面，我们就来简单了解一下CSS3控件垂直居中的几种方法。/方法1：使用和margin/...

CSS3控件垂直居中对于很多网页设计者来说是一个十分棘手的问题。实际上，控件垂直居中的方法和技巧也是多种多样的。下面，我们就来简单了解一下CSS3控件垂直居中的几种方法。

/*方法1：使用position和margin*/
.vertical-center{
	position: absolute;
	top: 50%;
	margin-top: -30px;
	width: 100px;
	height: 60px;
	background-color: #ff0000;
}

/*方法2：使用display: table-cell*/
.parent {
	display: table;
	text-align: center;
}

.vertical-center {
	display: table-cell;
	vertical-align: middle;
	background-color: #ff0000;
	height: 60px;
	width: 100px;
}

/*方法3：使用flexbox*/
.parent {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vertical-center {
	background-color: #ff0000;
	height: 60px;
	width: 100px;
} 

以上就是CSS3控件垂直居中的几种方法，开发者可以根据实际需要选择不同的方法。当然，这些方法的具体实现还需要进一步细节设计和优化，以获得最佳效果。