CSS垂直居中

本文主要是介绍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;  /*水平居中*/

   }

这篇关于CSS垂直居中的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！