CSS垂直居中

1.表格布局

把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。

#wrapper {
	display: table;
}

#cell {
	display: table-cell;
	vertical-align: middle;
}

2.绝对定位+负margin

#content {
	position: absolute;
	top: 50%;
	height: 240px;
	margin-top: -120px; /* negative half of the height */
}

3.绝对定位+transform

#content {
	position: absolute;
	top: 50%;
	height: 240px;
	transform:translateY(-50%)
}

4.绝对定位+四个方向都为0+magin:auto

#content {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 240px;
	width: 70%;
}

5.flex布局

 #div1 {
     width: 200px;

     height: 200px;

     border: 1px solid red;

     display: flex;

     align-items: center;   /*垂直居中*/

     justify-content: center;  /*水平居中*/

   }

 

标签：居中,content,50%,top,240px,height,垂直,CSS,absolute
来源： https://blog.csdn.net/ABCFF12333/article/details/118060319