CSS 实现div水平竖直居中

<div class="container">
			<div class="child"></div>
		</div>

1. 第一种 flex 布局

.container{
			display: flex;
			justify-content: center;
			align-items: center;
		}

2. 绝对定位

.container{
			position: relative;
		}
		.child{
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}

3. 绝对定位+translate

.container{
			position: relative;
		}
		.child{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
		}

4. table+table-cell

.container{
			display: table;
		}
		.child{
			display: table-cell;
			vertical-align: middle;
		}

5.  添加一个同级元素 以设置vertical-align: middle;的方式使两个元素居中对齐 

<div class="container">
			<div class="child"></div>
// 添加一个标签 设置成display: inline-block; vertical-align: middle; 并设置高度和父元素相同
			<div class="te"></div>
		</div>


.container{
			text-align: center; 设置水平居中
		}	
		.child{
			display: inline-block;
			vertical-align: middle;  // 居中对齐
		}
		.te{
			height: 100vh; // 设置和父元素等高
			width: 1px;
			vertical-align: middle; // 居中对齐
			display: inline-block;
			position: relative; 
			z-index: -1; // 隐藏在背景后部  让其不影响布局
		}