标签：居中 content 50% top 240px height 垂直 CSS absolute

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。