Centering Div

I cannot get my #sphere-content div to center horizontally and vertically in my #background div. Where is my problem? This should be so easy haha. Thank you!

HTML

<div id="background">

<div id="sphere-content"></div>

</div>

CSS

#background {
	margin: 0px;
	padding: 0px;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;
	background-color: #d5d5d5;
  display: flex;
}

#sphere-content {
	background-color: red;
	width: 50px;
	height: 50px;
	margin: auto;
}