学习笔记—元素垂直水平居中方案总结

元素垂直水平居中分为以下两种情况：
1、盒子高宽已知：
解决方案：

1、
#box1{
			width: 200px;
			height: 200px;
			background-color: red;
			position: absolute;
			left: 0;
			right: 0;
			top:0;
			bottom: 0;
			margin: auto;
		}

2、未知高宽：
解决方案：
1、

#box2{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

}

2、我们可以用flex弹性盒子布局

#flex-container{   //父盒子
				display: flex;
				justify-content: center;
				align-items: center;
				}

3、可用css grid网格布局

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item"></div>
</div>

/* CSS */
.grid {
    display: grid; // 或 inline-grid
    place-items: center
}