块级元素的垂直水平居中

块级元素水平垂直居中

1、给父元素设置相对定位
给子元素设置绝对定位
给子元素设置left，right，top，bottom都为0px;
给子元素设置margin：auto;

2、给父元素设置绝对定位
给子元素设置绝对定位
给子元素设置top=calc（50% - 子元素高度的一半）
left=calc（50% - 子元素宽度的一半）

3、给父元素设置绝对定位
给子元素设置绝对定位
给子元素设置left、top为父元素的50%
给子元素设置margin-top、margin-left为子元素宽高的一半

4、给父元素设置display:flex;
justify-content:center;
align-items:center;

5、给父元素设置display:flex;
给子元素设置margin:auto;
注：这种方法只适用于父元素只有一个子元素。

html代码：

	<div class="father">
		<div class="son"> </div>
	</div>

CSS代码：

	*{
			margin:0px;
			padding: 0px;
		}
		html,body,.father{
			width: 100%;
			height: 100%;
		}
		.father{
				background-color: teal;
		}
		.son{
			width: 300px;
			height: 300px;
			background-color: pink;
		}
		/*方法一*/
		/*.fahter{
			position: relative;
		}
		.son{
			position: absolute;
			top:0px;
			right: 0px;
			bottom: 0px;
			left: 0px;
			margin:auto;
		}*/
		/*方法二*/
		/*.father{
			position: relative;
		}
		.son{
			position: absolute;
			top:50% ;
			left:50%;
			margin-top: -150px;
			margin-left: -150px;*/
		/*方法三*/
		/*.father{
			position: relative;
		}
		.son{
			position: absolute;
			top:calc(50% - 150px);
			left:calc(50% - 150px);
		}*/
		/*方法四*/
		/*.father{
			display: flex;
			justify-content: center;
			align-items: center;
		}*/
		/*方法五:父元素只有一个子元素*/
		.father{
			display: flex;
		}
		.son{
			margin:auto;
		}
		```



	***********以上就是css中块级元素的垂直水平居中的相关介绍，有更好的欢迎留言!*******