css水平垂直居中

已知高度和宽度的元素

方案一：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

	<style>
		#father {
			width: 500px;
			height: 300px;
			background-color: skyblue;
			position: relative;
		}

		#son {
			width: 100px;
			height: 100px;
			background-color: green;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}
	</style>
	<div id="father">
		<div id="son">我是块级元素</div>
	</div>

效果：

方案二：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

	<style>
		#father {
			width: 500px;
			height: 300px;
			background-color: skyblue;
			position: relative;
		}

		#son {
			width: 100px;
			height: 100px;
			background-color: green;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -50px;
			margin-top: -50px;
		}
	</style>
	<div id="father">
		<div id="son">我是块级元素</div>
	</div>

效果：

未知高度和宽度的元素

方案一：使用定位属性设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

	<style>
		#father {
			width: 500px;
			height: 300px;
			background-color: skyblue;
			position: relative;
		}

		#son {
			background-color: green;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
		}
	</style>
	<div id="father">
		<div id="son">我是块级元素</div>
	</div>

效果：

方案二：使用flex布局实现
设置父元素为flex定位，justify-content: center; align-items: center;

	<style>
		#father {
			width: 500px;
			height: 300px;
			background-color: skyblue;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#son {
			background-color: green;
		}
	</style>
	<div id="father">
		<div id="son">我是块级元素</div>
	</div>

效果：