[分享]css两个圆圈居中

CSS两个圆圈居中p { text-align: center; margin-top: 50px; font-size: 18px; } .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; }

.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布局让容器水平和垂直居中，设置圆圈的宽高和圆角属性，然后使用弹性盒子让圆圈内的内容水平和垂直居中即可。