css两个圆圈居中

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;
}

.circle {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #7C4DFF;
	margin: 0px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 24px;
} 

使用CSS可以很简单的让两个圆圈居中显示。利用flex布局让容器水平和垂直居中，设置圆圈的宽高和圆角属性，然后使用弹性盒子让圆圈内的内容水平和垂直居中即可。