实在块级元素在父元素中居中的两种方法

版权声明：转载请先告知哦 https://blog.csdn.net/PINK789/article/details/88395252

方法一：

（1）父元素：position：relative；
（2）子元素：position：absolute；top：父元素高度的50%；left：父元素宽度的50%；margin-left：- 子元素宽度的一半；margin-top：子元素高度的一半；

方法二

（1）父元素：display:flex;flex-direction:column;justify-content:center;
（2）子元素：margin:0 auto;

<style type="text/css">
		#father{width: 800px;height: 800px;background-color: red;display: flex;flex-direction: column;justify-content: center;}
		#son{width: 200px;height: 200px;background-color: yellow;margin:0 auto;}
	</style>
</head>
<div id="father">
	<div id="son"></div>
</div>